Community forum for knowledge and support

Updated last year

Troubleshooting Relume layout inconsistencies across different screen sizes

At a glance

The community member is having issues with the layout of their Relume design, specifically inconsistencies in the padding, margins, and gutter sizes across different sections (navbar, heading, about, etc.) and screen sizes. They have provided a share link to their Webflow project, and other community members have responded with suggestions. One community member recommends looking into "Client First" naming conventions to help with the inconsistencies. There is no explicitly marked answer, but the community members are working together to try to resolve the issue.

Useful resources

Can anyone help me work out why my Relume layout seems broken. Im getting inconsistencies on different sizes and its driving me crazy. Happy to send over the webflow share link 😭

1
D
S
S
9 comments

Hey ! Please send through a share link so we can see which component you're referring to

Hey - heres the link (https://preview.webflow.com/preview/the-data-refinery?utm_medium=preview_link&utm_sour[…]a8f761e7d3&pageId=6434bc7b33f266208b36d276&workflow=preview). Notice how the header component and navbar component padding / margins all seem different. Would love your feedback. Its driving me crazy

Thanks!

cc

the design is amazing!
Do you mean that the names are all different? (ie padding-section-large 43, padding-section-large 25)
Is that what you're referring to?

Thanks I appreciate it! Im having issues with the sections e.g. the navbar, heading, about section etc. Each section has different gutter/container sizes, and I can't figure out why. The navigation has a different gutter compared to the heading, which in turn differs from the gutters of other sections. This inconsistency happens across all screen sizes. As I zoom in and out and change the responsive sizes, the containers remain inconsistent. Making it look messy. Sorry for asking what might seem like silly questions; I'm new to Webflow.

Here are some examples. You can also notice the feature / pain point section is different to both the heading, about and navbar section (macbook pro chrome zoom 100%)

your class names are inconsistent. If you apply the same class then the styling will be the same.
Does that make sense?

Okk will take a look. Thank you

Hey hey! πŸ™‚ Thanks for your patience. Hopefully this will help shed some light > https://www.loom.com/share/8631200affbf4daebe823e6ae754df84?sid=00542cc3-4d05-4b25-9c9a-7bf895032611

I recommend looking into Client First as this is what the naming conventions we build everything with.

Let me know if that helps!

Add a reply
Sign up and join the conversation on Slack