My section should scale according to its content

So I’ll be honest, my first webflow site is looking a hot mess, every page brings its own challenge. I have classes all over the place and constantly having to go back and fix pages that i’ve accidentally changed as Im learning while I’m doing.

One thing which has constantly frustrated me is my understanding of all things section height. I have watched all the videos which are fantastic! But Im constantly back and forth with my various device sizes making amends.

Can some help me to understand what is the best approach to make sure that the content within my sections scales accordingly? No sooner do i scale down to mobile, content begins to overlap other sections.

Thank you very much
Gus


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

This is pretty normal - once you have an understanding of the building basics you will rid yourself of these issues. This just takes time, but there are lots of resource to help with this.

I’d recommend cloneing a free template and breaking down how other users have tackled building sections. (flowbase.co)

When building sections you should consider duplicating the class (drop down arrow on class then duplicate). This is to save yourself from accidently changing the sizes and effecting previous built sections that share the class.

For example you migh make the class - section_pricing and then duplicate this as section_cta for the next one. This way they have unique classes and won’t mess with previous sections

I typically use the following styles for a section - 5% padding on the Left and Right and then using padding top and bottom, for example 100px top and bottom. This means that the general sizing of your section will remain the same despite what content you will add inside of it. It will always give you 5% padding on the sides and always give you 100px on the top and bottom. But this is just a base guideline.

You can then add a div/container inside of this to hold your content.

If content is overlapping its most likely due to the display settings. Block, Flex etc.

Could you link a read-only of your website and the section you’re having issues with.

Thanks

Hi @Thomas_92

Thanks for your reply.

https://preview.webflow.com/preview/folio-57a120?utm_source=folio-57a120&preview=b939653d6c5127f135aa02f59cb68302&mode=preview

Heres a link to my site. I’ll be honest its my first attempt really so all my classes are a hot mess. But if you look at some of my pages i do have some elements that bleed into other sections deliberately
on desktop, but i seem to loose my bearing with them as i scale down to mobile.

Cheers
Gus

Can’t see any obvious problems. It would’ve been better if you specified the misbehaving sections.

Hi @dram

Thanks for your reply. Sorry I should have been more specific. The particular page is my Jaguar and Land Rover page.

Well, you have fixed height set on your block here for example, obviously content that won’t fit this height will be off.

@dram Thanks for the insight. I changed that height setting on Mobile to 100%. And it pushed my content down as desired. Still trying to get my head around it. But thank you very much.

If you could tell us what exactly you are struggling to understand we may try to help you with that!

@dram Overall it is just my understanding of how to build within webflow, and understanding how parameters cascade down to other elements at smaller sizes.