Hi there,
We’re currently working on our site, and our header has three layers of text. On mobile these lines of text are overlapping and look very bad, also the navbar on the top is very big and unchangeable for some reason. It seems like the selectors aren’t working and I’m not sure why. Any help is greatly appreciated!
Yours sincerely,
Jamie Debnam [Director]
16 Creative
Here is my public share link: https://preview.webflow.com/preview/16-creative?preview=1c0c7784ae38a291e47d5a16d781da7c
You have to set properties for your site to be responsive.
When on the mobile device view in the designer, select each line of text, adjust the size, the text size or the zoom if it’s an image, and adjust the position of each to recreate your visual, but smaller.
Important: those new properties values won’t be applied to the upper breakpoints (mobile landscape, tablet and desktop). It only goes down. So you start styling for desktop, then tablet, then mobile landscape then portrait phone.
For the header too big:
The height of the header is mainly defined by its 80+ pixels bottom padding. So reduce that, and the size of the image/logo inside. Then you’ll notice that the section under doesn’t go up. it’s because
the first Banner element inside has a margin of 144px that is bleeding outside its parent (the section). Modify that margin value to match your new header height value.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.