Images disappear when switching to Mobile Portrait view

For a long time I had this design portfolio for myself and everything worked perfectly, it was great. I’m not the greatest in web design, but I got it to a point where it looked great for what I needed. In building my site however, one thing I never did was name my style classes to all of the elements I would use such as containers, sections, grids, etc. Last week I decided to, in an effort to make life easier on myself in the future, go through each element I used to build my site and give them a proper class name. However, after I did that all of my images disappear when I shrink down to a mobile portrait view of my site. I don’t understand what went wrong because I didn’t change any of the settings to any of the elements, just the name of the class.

Pretty much every image on my site is this way, so I know there must be a problem somewhere. I have images in each of my portfolio piece pages, my personal work pages, and my subpage in my photography section. My pictures are at 100% width and 100% max width. The only solution I can see is to change each image type from lazy to eager, but I don’t believe I should have to do that as it used to display the images just fine without doing that.


Here is my site Read-Only: [LINK][1]

Hello @davidmjones95, welcome to the community!
Yeah it is pretty weird what you are experiencing because your images disappear only on mobile devices, both in safari and on the chrome app. If I have to guess it is because you are using the old columns component rather than a dive with display grid? Anyway, a way to fix it, it worked for me when I was inspecting on my phone, give your images a min-height of 200px and set the object-fit to cover


I hope this helps!