Streaming live at 10am (PST)

Few questions about my 1st web site


#1

Hello all,

I seem to be having a couple of issues with my web site not quite being responsive to other devices, here are the couple of issues I'm facing.

Link to web site; https://preview.webflow.com/preview/dlux?preview=61794315af9c601c95a7be039ef9b75b

Ok so here are couple of my issues.

1) 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?

2) 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?

3) With regards to other devices, should I need to customize each device separately or should webflow be resizing things for me?

Looking forward to your help,

Best regards,
Matt


#2

Hello @Matty

Since here is few questions I will go step-by-step

  1. 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


#3

2 . Container overlapping

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.

change settings and they will look right

It will remove all "overlapping"


#4

3 . Re-sizing.

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.

Hope it helps.


#5

Hello Sabanna,

Thanks for very detailed post, I made those changes and believe things now look ok so far! Thanks for the clarification regarding % and auto.

Best regards,
Matt


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.