[Support request] Image is not displaying well on mobile preview

[Naama]

Hi, I am adding an image which is about 450×450 pixel which is displayed well on desktop. But when switching to mobile preview, the picture is not displaying proportionally to the content width and only part on the image is displayed. Any idea how to fix it?

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Naama]

Hi, I have attached a link as an example but it happens on all posts. look at the first image on desktop and them on mobile and you’ll notice the left part of the image is not displayed on mobile (the basket part)

[Fernando]

Hi Naama,

Can you try adding this through Appearance > Customize > Additional CSS:

@media (max-width: 768px){
    .wp-block-image figure {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
}

[Naama]

Hi, unfortunately, it is still not working well

[Ying]

The CSS is working:
https://www.screencast.com/t/ThM5Yv8Uj

Can you make sure the cache is cleared on your mobile devices?

[Naama]

will do

[Ying]

If it still doesn’t work, try disabling the cache plugin.

Let me know!

[Author]

Posts