Featured image max width issue

Hi,

I have increased content container width with the “strech row” option to have more space for my content. To also use a larger featured image on screens with sufficient width, I have set “featured image size” to 1068×0 which causes issues.

On some occasion, on the first page load, the featured image breaks out of the content row, occupying more space which looks like this: https://1drv.ms/i/s!AlQHsqtJGzeatY9RhEiMn2YX0xtTnQ?e=7Y57yw

If then I reload the page, the image aligns how it should: https://1drv.ms/i/s!AlQHsqtJGzeatY9Suj1JtUilqiEIog?e=0CrNUq

How can I fix this?

The problem does not always occur, and mostly when people load pages on my site via the Google SERPs – like from here (as of now): https://tinyurl.com/ybu392bb

Thanks for looking into this

Hi Bettina,

You currently can reproduce the problem when opening these two different pages directly from the Google SERPs, at least I can with incognito mode:

– https://tinyurl.com/4u83xw2r
– https://tinyurl.com/mpmtevue

I have attached two new full page screenshots for you for these two pages:

https://1drv.ms/i/s!AlQHsqtJGzeatY9lkO8LPT26n-sodg?e=wLnhz8
https://1drv.ms/i/s!AlQHsqtJGzeatY9mSXcAdYX9FRN83A?e=zaUWMr

Here is the tagdiv composer view for our posts template:
https://1drv.ms/i/s!AlQHsqtJGzeatY9kLtq2PHDsn4wmrQ?e=KE6lXv

The issue seems to be somewhat related to how “Googlebot smartphone” renders the pages and then stored some data which is now being used when users click on the Google SERPs.

This means the issue appears only for some pages when users come from Google, as some cached version or parts of the code (that had been served on a previous crawl) is being applied

If the user then reloads the affected page the problem disappears. All visits/loads that are not coming from Google appear to render the pages correctly – including from Bing SERPs

My assumption as of now is that some dynamically served image (container/element) code to “Googlebot Smartphone” sometimes produces a flawed cache result – which then affects desktop users when they visit the site from Google SERPs.

In the meanwhile I did some tests with the previously reported page:

– Doing a minor change on the affected article
– Reducing the featured image dimensions and saving the page
– Re-indexing it again manually via Google Search Console.

This removed the problem. But this could be just a random success as in general not all pages are affected.

Further changes I have implemented in an effort to fix things:

I added this custom CSS code to my wordpress theme to force a limit for maximum image size rendering on mobile devices, to target Googlebot smartphone which seems to have some rendering issues with the code it gets:

@media (max-width: 767px) { .tdb_single_featured_image img { width: 100% !important; max-width: 696px !important; height: auto !important; } }

Hi,

I have identified Cloudflare’s feature for “Automatic Signed Exchanges (SXGs)” as a possible cause and disabled it. Sounds very much like it:

“Improve your website’s performance by making cacheable resources available on Google’s Signed Exchanges. Enable Chromium based browsers to prefetch your website on Google’s search results page and make your website faster. Improve the Largest Contentful Paint (LCP) which is part of the Core Web Vitals and increase your SEO ranking.”

Let’s see what happens.

Hi,

I will do – we will have to wait until affected pages will have been crawled again by Google.

Thanks