Images for CMS Pages Only Displaying on One Page in Mobile Portrait

Design help Layout & Design
1

I have a number of CMS pages for my projects in my portfolio. For all of the pages, all of the images show up fine in designer and on the live site in every breakpoint but mobile portrait (mobile landscape works as intended). For mobile portrait, only the last page that I made changes on is displayed properly with all of the others not having the images show up.

I have read other topics on this subject : tried to set the width to 100%, tried to set width and height to 100%, tried to change the Slide class to display:block

I did notice that there was a zero in the source code for the live site:
webflow issue
This was similar to this person’s issue which they fixed with media queries : CSS class on images displays only one project Page at a time correctly on Mobile Portrait View

However this did not fix my issue.

Side note: after working in the designer for a little bit, the images also disappear on the pages until I make a change, in which case they disappear for the other pages. However this is fixed when I refresh my browser so I assume it is just a bug.

Thank you in advanced for any help.

Here is my site Read-Only: Webflow - Ethan's Portfolio

Here is the live site: https://lau-ethan.webflow.io/

2

Webflow seems to have a bug in responsive images where it mis-calculates the responsive images sizes, particularly within CSS grids.

A few things you can try;

  • Regen your responsive images
  • Give the image a size, or even 100% width, and regenerate your responsive images
  • Disable that specific responsive image element
3

Thank you so much for the reply. Disabling the responsive images worked.

1 Like