I’ve started designing my 1st website with webflow but seem to be having an issue with when it resizes to other devices, the main issue is the “topnav” section (Orange Bar) when it resizes to mobile for e,g I lose some of the text, as well as the social buttons get moved onto a different line with white background. Not how it should be in desktop view?
I have an issue with my container over lapping other containers when being viewed in other devices, if you look at container “take a look container” with the grey background it looks fine on desktop, but as you go through the devices it just seems to overlap?
With regards to other devices, should I need to customize each device separately or should webflow be resizing things for me?
Since here is few questions I will go step-by-step
Navigation.
You are using a row with 2 columns there. On mobile devices (tablets and phones) columns can stay NEXT to each other or can go one UNDER other. By default there is “UNDER” option. But if you want it to look like on desktop - click on “NEXT” option.
Then, text in one of the column will change to 2 lines and since your topnav container has height 42 px it will not change by itself and part of text will be not visible (2 lines * (20px line_height) + 10 px padding = 50 px, which is more than 42 px)
Here you have to change font size or change topnav height to AUTO
You have section services which stays before that container.
That section itself and elements inside has fixed height (240 px) which is not enough for hold all content (columns goes one under other) so it goes “out” and cause “overlapping” effect.
For fix it:
Go to tablet view
change height of section, container, row and columns to AUTO.
with your settings, columns there look like this (buttons out of section)
Webflow based on cascading styles. It means : any style that you create on desktop view will be same on tablet and phone views, if you will not change styles in that views.
If you want automatically re-sizing objects (elements), then there should be sizes in % or auto, not in px.
