[Resolved] Making featured image responsive?

Home Forums Support Making featured image responsive?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1191751
    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

    #1192039
    David
    Staff
    Customer Support

    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 ?

    #1192171
    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.

    #1192288
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #1266130
    Niklas

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

    #1266387
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.