My site is having trouble stacking in mobile view

Design help Layout & Design
1

Hello All,
Working on my design portfolio and learning Webflow at the same time. I am trying to optimize my site for mobile and all my elements seem to overlap each other on mobile view. In all the other views it looks fine, just having issues with mobile. Any help would be appreciated!

*Would also welcome any pointers for making the collection list for the projects a bit more presentable/cooler.

Here is my site Read-Only:
https://preview.webflow.com/preview/liquidrudydesigns?utm_medium=preview_link&utm_source=designer&utm_content=liquidrudydesigns&preview=f746a18ac7e09f2ccfbb111818a1c6a7&pageId=640a8fe70705eb8a8b8f76fc&workflow=preview

2

Your ‘image 12’ element has a fixed minimum width of 45vw. On smaller screens this becomes a problem.

I’d recommend removing that minimum width and also stacking your ‘div block 19’ elements vertically rather than horizontally. You could just switch these to a flex box rather than a grid tbh. Your ‘container 9’ element could also use some padding on the right, since it has padding on the left.

1 Like