Why are my images so large on the mobile site?

Site URL: https://www.thevelvethangermi.com

Hello,

Can anyone give me advice on how to make my website more mobile friendly? Everything looks perfect on the desktop, but nothing resizes when I switch to the mobile version.  Every page on the site looks like this, aside from the shopping page and that could even use some adjustments.

Thanks in advance!!

I believe this is because you are using static images which are very large, instead of content blocks. When the site resizes on mobile, an image is "zoomed" to fill the space available for it on the screen. This is why all your images look weird on mobile. 

In general, images that hold text are not ideal. Responsive features are excellent for cross-device browsing, but you can never completely control how an image will show on a particular screen size, so you can never guarantee that headline text will be shown or that a certain image will be in the middle, etc. 

I would recommend building out the desired design using content blocks of text. The site structure is relatively simple, so it should be easy to replicate the images for the most part, using Squarespace content blocks.

Look at your Footer as a great example of how the site works when you use content blocks. It is resizing itself perfectly across desktop & mobile. Also the text sections "Love What You Wear" & "Shop Sustainable Now".