Streaming live at 10am (PST)

Image showing wrong size when published


#1

I have a problem with images not displaying correctly. They look perfect on WF but are a different size when published. If you go to the site http://winningmemories.webflow.io/ (the same happens on the actual domain) click on collections you can see that Hunt Coat Collection 2nd from the right is wrong but it looks OK on WF, same with Wedding and if you scroll down you can see it effects a few others.

I’m using Flex, which I’m relatively new to so I am sure I’ve just missed something! Please help!


Here is my site Read-Only: https://preview.webflow.com/preview/winningmemories?preview=be26e0b8f817b01ee295d49cb4f806d6
(how to share your site Read-Only link)


#2

Can anyone help with this please?

I need to publish next week. Thank you


#3

There is required @media query to fix this.


#4

Thank you @shubham1 - where will I find it?


#5

One thing that I notice is that the image dimension settings are not consistent. For example, some images have a fixed width of X amount of pixels, while you have others in the same row set to Auto for both width and height. Making those settings consistent should help.


#6

https://www.w3schools.com/css/css_rwd_mediaqueries.asp please read this article , hope it would help you so better.


#7

Thank you @shubham1 and @matt.bryant - the w3 solutions looks a bit out of league, regrettably - ashamed to say I am finding it difficult to understand. I think I will start with consistency and go from there. I have resizing tools so this is probably the easier option. Thnak you both for taking the time to reply, much appreciated.