How do I fix this grid?

A_L · January 19, 2021, 4:12am

Hi,

This is my first website design project using Webflow.
I was wondering how to get my grid element to not overflow beyond the section it’s in so that everything in it transforms easily?

Thanks

https://preview.webflow.com/preview/cdac-uic?utm_medium=preview_link&utm_source=designer&utm_content=cdac-uic&preview=a8b9abd92aebec0819febe6ff91867aa&pageId=5fff91a1075db94e145e6bba&mode=preview

It looks right in 1073 px, 100% but…it’s going to be a problem if that’s the only ratio that works lol…unless that’s something I can lock for desktops at least? I don’t know.

-A

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Dave_Birnie · January 20, 2021, 4:20pm

Hey @A_L and welcome to Webflow,

The issue you are experiencing is due to the px set on your grid spacers:

Personally, I always delete all spacers, then in my margins set them as a %. This will make sure they stay on the page responsively. In your case, you would add the margin to your “Staff id picture”

Hope this helps.

A_L · January 20, 2021, 9:55pm

Hi,

Thank you! How do I set it as a percent? I’m not seeing the option in my version of Webflow.

Dave_Birnie · January 21, 2021, 3:01pm

Hey Amanda,

You cannot set the gaps as a % which is why I recommend deleting them. Instead set your div margins as %. You can do this one of 2 ways

SELECTING %

or

TYPING %

Additionally, make sure you use a good naming convention for your elements. This will save a lot of frustrations moving forward when/if you get into animations.

Hope this helps! Feel free to ask any more questions!