Images are not responsive

Hi @nostradalmine!

I was doing a quick test to add images using the Classic Editor to a site using TT2 & TT3 but I cannot reproduce the problem you describe.

Could you please provide more details or, ideally, a link to the URL where you have noticed this?

Thank you!

Hi, thanks for your help.
Here is the link: https://nostradalmine.it/blog/2022/11/01/lavori-via-trento/
If you go mobile, you can see it’s not responsive.

Thank you for the link!

I see what you mean, the image is overflowing:

I tried to add an image to a post using the Classic Editor on Twenty Twenty-Three and this is the markup that gets added:

<img loading="lazy" decoding="async" class="alignnone size-full wp-image-7" src="https://149755017.v2.pressablecdn.com/wp-content/uploads/2022/11/IMG20221021104358-scaled.jpg" alt="" width="2560" height="1920" srcset="https://149755017.v2.pressablecdn.com/wp-content/uploads/2022/11/IMG20221021104358-scaled.jpg 2560w , https://149755017.v2.pressablecdn.com/wp-content/uploads/2022/11/IMG20221021104358-300x225.jpg 300w , https://149755017.v2.pressablecdn.com/wp-content/uploads/2022/11/IMG20221021104358-1024x768.jpg 1024w , https://149755017.v2.pressablecdn.com/wp-content/uploads/2022/11/IMG20221021104358-768x576.jpg 768w , https://149755017.v2.pressablecdn.com/wp-content/uploads/2022/11/IMG20221021104358-1536x1152.jpg 1536w , https://149755017.v2.pressablecdn.com/wp-content/uploads/2022/11/IMG20221021104358-2048x1536.jpg 2048w " sizes="(max-width: 2560px) 100vw, 2560px">

In the case of your image, the one that’s overflowing, this is the code I am seeing:

<figure id="attachment_4870" aria-describedby="caption-attachment-4870" style="width: 760px" class="wp-caption alignnone"><a href="https://nostradalmine.it/blog/wp-content/uploads/2022/11/alberti-via-trento.jpg"><picture decoding="async" loading="lazy" class="wp-image-4870 size-full">
<source type="image/webp" srcset="https://nostradalmine.it/blog/wp-content/uploads/2022/11/alberti-via-trento.jpg.webp 760w, https://nostradalmine.it/blog/wp-content/uploads/2022/11/alberti-via-trento-300x231.jpg.webp 300w, https://nostradalmine.it/blog/wp-content/uploads/2022/11/alberti-via-trento-150x115.jpg.webp 150w, https://nostradalmine.it/blog/wp-content/uploads/2022/11/alberti-via-trento-663x510.jpg.webp 663w" sizes="(max-width: 760px) 100vw, 760px">
<img decoding="async" loading="lazy" src="https://nostradalmine.it/blog/wp-content/uploads/2022/11/alberti-via-trento.jpg" alt="" width="760" height="585" srcset="https://nostradalmine.it/blog/wp-content/uploads/2022/11/alberti-via-trento.jpg 760w, https://nostradalmine.it/blog/wp-content/uploads/2022/11/alberti-via-trento-300x231.jpg 300w, https://nostradalmine.it/blog/wp-content/uploads/2022/11/alberti-via-trento-150x115.jpg 150w, https://nostradalmine.it/blog/wp-content/uploads/2022/11/alberti-via-trento-663x510.jpg 663w" sizes="(max-width: 760px) 100vw, 760px">
</picture>
</a><figcaption id="caption-attachment-4870" class="wp-caption-text"><em>La pericolosità degli alberi di Via Trento, tratta dalla relazione dell’Arch. Silvia Guadagni.</em></figcaption></figure>

I could be wrong but it looks like this image was in fact added using the block editor.

Could you please remove the image completely and try to add it again using the classic editor?

“I could be wrong but it looks like this image was in fact added using the block editor.”

It wasn’t added using the block editor, I was using the classic editor. And I did so for every post. So the problem is, even though we fix this one, I can’t really go and update every post I did so far.

Thanks for the reply!

I see, thank you for confirming this. I am not quite sure what could be causing this but you can fix it by adding this CSS code (it will prevent all images from being wider than the available screen size)

.wp-site-blocks figure img {
  max-width:88vw;
  height:auto;
}

You should be able to add this CSS code here:
https://nostradalmine.it/blog/wp-admin/customize.php

I hope that helps!

Thanks, your solution works perfectly with images.

But, there are other “overflow” problems in mobile view: image captions, widgets inside the classic editor, some text (like in this article https://nostradalmine.it/blog/2020/10/28/ultime-novita-autostrada-bergamo-treviglio/).

I think there are too much work to do because I should check every article. I think the easy option here is to just stay with the 2015 theme.

Ah, I see what you mean, I did not take that into account. Could you please replace the code I shared before with this one?

.wp-site-blocks figure, 
.wp-site-blocks figure img, 
iframe {
  max-width:85vw;
  height:auto;
}

This new code will ensure that the captions are kept within the limits of the screen. If there are any elements that are still overflowing, please let me know!

• This reply was modified 2 years ago by Alvaro Gómez.

@mrfoxtalbot I’m wondering if there is a third-party plugin at play here.
Maybe a plugin designed to convert jpg images to webp that could be adding the extra markup?

@nostradalmine do you have any image related plugins active?

Imagify by WP Rocket and Simple Image Sizes by Rahe

If you deactivate those two plugins does this fix the issue?

Edit: it looks like the CSS from @mrfoxtalbot has fixed the issue. If you see the issue again, it would be worth looking into a plugin conflict.

• This reply was modified 2 years ago by uxl.

I’m marking this as resolved since it’s been a while since we’ve heard from you. If you need help with anything else, don’t hesitate to start a new thread.