CMS Blog pictures not appearing on mobile

Hello, I am trying to troubleshoot a problem with our CMS. When we make the blogs featured blogs the pictures are not showing up on mobile on the home page and also on the blog page. The margins are super wide and are prohibiting the picture from showing. There is also a margin error in the text as well. I have no idea why this is happening because they all look like they are there correctly.

https://preview.webflow.com/preview/animalbiome-com?utm_source=animalbiome-com&preview=38526d4ddafed010ca83df3f5a00fc64

@Sales_AnimalBiome - Welcome to the forums.

I am not seeing that. Here I selected featured items = on.

CloudApp

The blog page is using newest. No filter set. Images present.

Can you share a screen cap? I don’t know what you are looking at.

Again it really helps us help you if you can share an example.


here is what I see on the desktop

When you are having issues on the front end (published site) please share the link to it. I was able to locate it though deduction.

The issue is being caused by the process that makes images responsive, which is controlled by webflow.

Technical → img.blog-post-image sizes="(max-width: 479px) 2px, 1vw" is resizing the image to 14px x 11px and other similarly small sizes on smaller breakpoints.

Cause: I suspect this is due to the use of all or many of the css size attributes you have used on the img.blog-post-image in the designer and the responsive generation process being confused by competing attributes.

Suggestion. Set img.blog-post-image to display:block, remove the unnecessary size attributes, publish and test.

I did remove the size attributes to auto but it only made the pictures smaller. I can’t find the css setting you showed displayed above. Can you re-explain how to fix this problem?

That code was generated by Webflow’s responsive image process on publish. Not something you can control.

Need the webflow team to chime in on what is causing this.

Hi @Sales_AnimalBiome Welcome to the community :slight_smile:

I did some debugging and found the solution:

Set your post-preview-image-link element to display:block;

CloudApp

Try this and let me know how it goes :slight_smile:

I think that worked, thanks so much!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.