- This topic has 11 replies, 3 voices, and was last updated 4 months, 1 week ago by
Elvin.
-
AuthorPosts
-
October 19, 2020 at 2:18 pm #1496229
Jatin
Hi Guys,
I want to have full width image when someone visits my site from mobile phone, you can see the image is left aligned with a gap on the right hand side. Can you please advice if there is a way to make it use the full space. Site link in the box.
October 19, 2020 at 3:01 pm #1496259Elvin
StaffCustomer SupportHi,
You can try going to Appearance > Customize > Layout > Blog and make sure the width and height are blank as shown here. https://share.getcloudapp.com/2NujPd1D
Make sure you publish changes you made and check if it applies on the live site.
Additional note: If the image size is too small to go full container width, you may have to force it by css.
.post-image img{ width:100%; }
A wise man once said:
"Have you cleared your cache?"October 20, 2020 at 2:50 am #1496663Jatin
Hi Elvin, Thanks for the suggestion. I have set the Width and Height for Archive Pages to 300 x 200 which is fine on the desktop. But I wanted to only change this for mobile. I do not want to change the width and height for Desktop Featured Images.
I tried to above code as well but this had no affect on the mobile phone Featued Image, I am not using any Cache Plugin.
October 20, 2020 at 3:28 am #1496710David
StaffCustomer SupportHi there,
in Customizer > Layout > Blog –> Featured Images >> Archives – set the Media Attachment to Full and remove any values you have set in the Width and Height.
Then add this CSS to your site:
@media(max-width: 768px) { .post-image img { width: 300px; height: 200px; -o-object-fit: cover; object-fit: cover; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 20, 2020 at 6:16 am #1496915Jatin
Didn’t work. Its Applied and when i removed width and height from the Customizer > Layout > Blog โ> Featured Images >> Archives page my desktop Archive Page Featured image is not consistent as you can see by visiting my site.
Archive Featured Image Settings
Media Attachment set to Full
Width and Height settings removed.
CSS Code Applied.October 20, 2020 at 8:02 am #1497196David
StaffCustomer SupportDid you set the Media Attachment to Full ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 20, 2020 at 8:06 am #1497208Jatin
Yep.correct
October 20, 2020 at 12:52 pm #1497586Elvin
StaffCustomer SupportThat’s strange.
A simple width:100% should work as shown here:
https://share.getcloudapp.com/6quPvyw2Perhaps there’s a CSS conflict somewhere in the CSS code prevents this from working.
Can you check your CSS codes if you something that uses the same selectors? (
.post-image img
or.post-image > a > img
)A wise man once said:
"Have you cleared your cache?"October 21, 2020 at 12:54 am #1497962Jatin
This is all the code i have when i searched in Simple CSS for .post-image
.post-image {
position: relative;
}
@media (max-width: 768px) {
body:not(.single-post) .inside-article .post-image {
text-align: justify;
}
}
@media(max-width: 768px) {
.post-image img {
width: 300px;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
}
}October 21, 2020 at 2:04 am #1498035Elvin
StaffCustomer SupportAh I see.
You can try modifying David’s code a bit.
Try this out:
@media(max-width: 768px) { .post-image img { width: 100% !important; height: auto; -o-object-fit: cover; object-fit: cover; } }
Let us know if it works for you.
A wise man once said:
"Have you cleared your cache?"October 21, 2020 at 2:22 am #1498052Jatin
Works fine now. Thanks Elvin.
October 21, 2020 at 12:43 pm #1498882Elvin
StaffCustomer SupportGood to know. No problem. ๐
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.