Are components supposed to copy the breakpoint settings?

Design help General
1

Hello, I’m having trouble with my navbar not scaling well on new pages. It appears to be that breakpoints are not copied over for components. Is this how it’s supposed to function?

To note you can see the issue when going to “Company” page and setting the width lower to tablet (768px screen width). The logo falls behind the nav bar and the links flow off the page, two issues I fixed with breakpoints on the home page.

Here is my site Read-Only: Webflow - Gen1

2

Hello friend, I think that components are items that will work the same anywhere they are placed, doesn’t matter the styles you designed, so what I recommend is to create your component, style it for desktop, then for responsive/mobile, but when editing, make sure you are inside the component and editing it, else you are only editing the dynamic info from the component but not the wireframe itself.

3

Adding to Sebastian’s notes;

  • To style any element in Webflow, you assign a class in the Style selector, and then apply the style settings you want.
  • Breakpoints apply only to those style settings, which makes them a fundamental part of the class definition.
  • Components are simply a grouping of elements, which may or may not have classes (“Style selectors”) assigned.

The upshot is that whether your elements are grouped into a component or not will have zero effect on how the styles and breakpoints behave.

4

So because I created the component AFTER styling it, all the styles for the breakpoints were not saved. It seems a bit counter intuitive to have to create the component right away then style it as a first time user, though I see the how it could benefit to have edge cases for specific pages.

Once I edit the styles in the breakpoints while in edit component mode, it will work on all pages.

Thanks for the reply!

5

It makes no difference when you create the component. Styles have nothing at all to do with components- they only relate to your classes, which are applied to the elements within the component.

You can create, apply and change your styles, and the classes applied to your elements at any time, before or after you create the component.

6

I found the root issue.
Since I was scaling the text by viewport width on the body container, the sizes of the linked components turned out differently on a new page with new body container not having the same style selector class as the one from Home page.

Your components are working beautifully.

Thank you guys for your help!

Leaving ref imgs for others.

Screenshot_7
Screenshot_71920×939 127 KB

Screenshot_6
Screenshot_61920×939 114 KB