Wrong size image being fetched for smallest screens

  • Resolved jamminjames

    (@jamminjames)


    1 month, 2 weeks ago

    The image size being fetched for the smallest screens (under 400 px wide) is too large, it’s picking my medium size image setting from media settings. Why won’t it go down to the thumbnail size, or at least reduce the 400 px wide image to the screen size?

    Using Google’s Inspect, I can see that the ‘figure’ element has a style attribute set (not CSS) as style="width: 390px;". When I uncheck that, the image is sized properly. So, this seems to be part of the theme coding, how can I fix it?

    Other than that, I can’t find anything in our CSS causing this. We’re using EWWW Image Optimizer, and have ‘Lazy Load’ and ‘Automatic Scaling’ checked, however, when I uncheck these, there is no change, so I don’t think that’s the cause.

    • This topic was modified 1 month, 2 weeks ago by jamminjames.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter jamminjames

    (@jamminjames)

    Found a solution to this. Added to CSS:

    figure {
    width: auto !important;
    }

    However, it seems odd that it is set to 390px in the first place. Is that in the theme somewhere? It seems to be hard-coded on the page.

    • This reply was modified 1 month, 2 weeks ago by jamminjames.
    Alvind

    (@alvindcaesar)

    Hi there,

    I don’t think that’s being set by the theme. You can verify by checking the URL of the stylesheet to confirm where it’s coming from.

    Thread Starter jamminjames

    (@jamminjames)

    But it’s not coming from a stylesheet, as I said. The inspector shows it’s part of the figure element on the page. So, on the page, the figure is included as:

    <figure style="width: 390px;">

    This is true in every post.

    • This reply was modified 1 month, 2 weeks ago by jamminjames.
    • This reply was modified 1 month, 2 weeks ago by jamminjames.
    Alvind

    (@alvindcaesar)

    Definitely not coming from the theme, as the theme does not set explicit dimensions for the figure tag. It’s likely being added by another plugin on your site.

    Thread Starter jamminjames

    (@jamminjames)

    For us, this worked in our child theme style sheet, for media 400 pixels wide (changed from my original solution, above):

    @media (max-width: 400px) {
    .wp-caption {
    width: auto !important;
    }
    }

    Alvind

    (@alvindcaesar)

    Glad to hear that!

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.