Image stretches to fill screen width when viewed on mobile

I have a small image – see https://www.news.cyprus-property-buyers.com/wp-content/uploads/2017/07/cmc1.png that I put at the foot of some on my articles.

I displays at the correct size (131 x 11px) when viewed on a desktop, but is stretched to fill the screen width when viewed on a mobile phone – see https://imgur.com/a/CVHBaV8

I have contacted Imagify, which I use to compress all my images about the problem and they replied:

“Please note that your theme is responsible to display the correct size needed on your website locations and according to the visitor’s screen.

“This type of issue is not related to Imagify; it should be addressed by the theme provider.”

The code used to display the image as follows:

<p><picture decoding="async" class="aligncenter size-full wp-image-152697">
<source type="image/webp" data-lazy-srcset="https://property-11519.kxcdn.com/wp-content/uploads/2017/07/cmc1.png.webp 131w, https://property-11519.kxcdn.com/wp-content/uploads/2017/07/cmc1-70x6.png.webp 70w" srcset="https://property-11519.kxcdn.com/wp-content/uploads/2017/07/cmc1.png.webp 131w, https://property-11519.kxcdn.com/wp-content/uploads/2017/07/cmc1-70x6.png.webp 70w" data-lazy-sizes="(max-width: 131px) 100vw, 131px" sizes="(max-width: 131px) 100vw, 131px">

</picture>
<noscript><picture decoding="async" class="aligncenter size-full wp-image-152697">
<source type="image/webp" srcset="https://property-11519.kxcdn.com/wp-content/uploads/2017/07/cmc1.png.webp 131w, https://property-11519.kxcdn.com/wp-content/uploads/2017/07/cmc1-70x6.png.webp 70w" sizes="(max-width: 131px) 100vw, 131px"/>

</picture>
</noscript></p>

You can view the post at https://www.news.cyprus-property-buyers.com/2024/01/30/limassol-dominated-the-cypriot-property-market-in-2023/id=00168437

Any thought on how I may correct this?

Thanks

Nigel

Hi Anamaria, I added the image in the post content.

Thanks

I’m wondering if this problem is related to the image alignment issue I reported at https://forum.tagdiv.com/topic/imagify-problem-solved/ ?

Reply removed – investigating further

• This reply was modified 2 years by nhowarth.
• This reply was modified 2 years by nhowarth.

Hi Anamaria

I may have solved the problem with the stretched image on mobiles:

At lines 724 – 727 of /td-composer/mobile/style.css, the code reads:

.alignnone img,
.aligncenter img {
width: 100%;
}

I believe this is what’s causing the stretched image problem. Editing the code to read:

.alignnone img,
.aligncenter img {
/* width: 100%; */
}

resolves the problem.

But I’m not sure if it causes different problems elsewhere.

Regards
Nigel

I’ve applied the /* width: 100%; */ fix to the style.css in my child theme and removed it from wp-content\plugins\td-composer\mobile\style.css.

But the stretched image problem returns because it’s picking up the css from \td-composer\mobile\style.css rather than the one from my child theme’s style.css.

How can I fix this to avoid editing the \td-composer\mobile\style.css every time you issue an updated Newspaper theme?

(I’ve looked through https://forum.tagdiv.com/the-child-theme-support-tutorial/, but it doesn’t help.)

Thanks
Nigel

Yes. BUT I had to edit wp-content\plugins\td-composer\mobile\style.css to fix it.

How can I include the fix in my child theme .css?

As I don’t want to edit wp-content\plugins\td-composer\mobile\style.css every time you issue an updated Newspaper theme?

Thanks Anamaria

All is now OK.

Nigel