[Resolved] Making featured image responsive?

[Niklas]

I’m using the Marketer site but noticed that featured images aren’t responsive with these theme? How can I make them responsive so the featured image becomes smaller on mobile

[David]

Hi there,

Marketer uses a little CSS to control the size of the Image for the Desktop display. It can be found in Customizer > Additional CSS:

@media (min-width: 769px) {
    .post-image-aligned-left .post-image img {
        max-width: 300px;
    }
}

But it doesn’t apply to mobile, so that Site should just display the image, and if it is large enough it will fit the space available to it.

Can you provide me a link to your site so I can see the problem ?

[Niklas]

Sure: https://www.thenipslip.com/
Its the small 250×200 images that aren’t responsive. I want the format to look the same in mobile with a featured image on the left and text to the right but when I edit the css to make that happen, the featured image stays the same size in mobile.

[Leo]

Not 100% sure if I’m following.

If the image itself is already small with 250px in width, then it won’t size down if the mobile screen width is larger than 250px (which generally is).

Maybe this is what you are after?

@media (max-width: 768px) {
    .post-image-aligned-left .post-image img {
        max-width: 150px;
    }
    body:not(.post-image-aligned-center) .inside-article .post-image {
        float: left;
        margin-right: 10px;
    }
}

[Niklas]

Hi, so sorry for forgetting to reply. That last code did the trick! Thanks!

[Leo]

No problem 🙂

[Author]

Posts