[Resolved] Full width image on mobile

[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.

[Elvin]

Hi,

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%;
}

[Jatin]

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.

[David]

Hi 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;
    }
}

[Jatin]

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.

[David]

Did you set the Media Attachment to Full ?

[Jatin]

Yep.correct

[Elvin]

That’s strange.

A simple width:100% should work as shown here:
https://share.getcloudapp.com/6quPvyw2

Perhaps 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 )

[Jatin]

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;
}
}

[Elvin]

Ah 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.

[Jatin]

Works fine now. Thanks Elvin.

[Elvin]

Good to know. No problem. 🙂

[Author]

Posts