Why are my pages linking?

  1. I am trying to create a different footer for different breakpoints but whatever changes I make to the tablet and lower breakpoints make changes to the desktop versions! (I am trying to rearrange the div blocks in the footer section)

images below are desktop design vs tablet/mobile


  1. I am also having the same issue with the nav bar! I think I just need to not use the webflow default and create my own but when I add a new section to the tablet breakpoint to create a new nav bar design, the same thing is implemented to the desktop breakpoints ;-;

I also realized that when I add a div block to the hero section on tablet, it gets implemented to other breakpoints as well :smiling_face_with_tear:

I tried making a class combo for the tablet but the class combo get copied on other breakpoints!!! (ahhhhhh)

Is it an inheritance issue? How to I override the inheritance?


Here is my site Read-Only: Webflow - Computec website

Hi SooYoung,

All of the elements you create and move in the designer exist at all breakpoints.
The responsiveness comes into play with the style panel only, and it works outward from the default desktop breakpoint. Start your styling there and then work downwards to smaller breakpoints and upwards to larger ones ( if you have any ).

If you want to have significantly different element arrangements at certain breakpoints, you really have three options;

  1. Make two versions of that section, and use the display: none setting in style to control which appears at which breakpoints.
  2. Learn the flex layout well, and structure / nest your section DIVs so that you change positions by reversing the order of elements in flex
  3. Learn the grid layout well, ninja-level. All of your element positioning and sizing is controlled by CSS therefore it can be modified at every breakpoint through the style tab. **

** Grids are awesome, and powerful, however they’re a nightmare if you do them wrong. Layouts blow up, elements go off screen. Chaos. More than one client has brought me in originally just to fix grid issues. I’d practice hard in a separate project or a clone before you try doing this in your main project.

Thank you so much for your reply! What does it mean when I hide a section in the desktop breakpoint but the same gets applied to the tablet breakpoint? Is there a way to unlink them?

Let’s say you have two DIVs. You want DIV1 to be shown only on desktop and tablet, and DIV2 only on mobile landscape and portrait.

DIV1;

  • Desktop bp - gets displayed normally, as block, flex, grid, whatever you’re doing
  • Tablet bp - inherits Desktop settings
  • Landscape bp - hide
  • Portrait bp - inherits Landscape settings

DIV2;

  • Desktop bp - hide
  • Tablet bp - inherits Desktop settings
  • Landscape bp - set to your desired layout of block, flex, grid, etc for whatever you’re doing
  • Portrait bp - inherits Landscape settings

In this config, your DIV1 only appears on desktops & tablets, DIV2 only on mobiles.

Oh!! Thank you so much I will try that out! :bowing_woman:t2: