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?
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.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
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.
Thank you! How do I set it as a percent? I’m not seeing the option in my version of Webflow.
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
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!