Website doesn't look right on mobile

Design help General
1

So i am designing a website and when I open it on my Samsung note 10 plus on landscape mode it doesn’t look right, the navbar has been overlapped with text!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Your container within your navbar section is set to position absolute. So it is always going to be located in the same place from the top of the screen as per your margin and flexbox settings.

The hero section is set to 100vh. On a tablet in landscape, your viewport height isn’t very large, so the things within will be closer to the top.

Might just need to play around with your design a bit.

I do notice that you are duplicating all of your content, and then either showing or hiding depending on screen size. This may hurt your SEO, since you have duplicate content on the same page. Would be good practice to adjust the styling of each element individually as you scale down, rather than having an entire different layout. This would also help you get the styling right for the overlapping issue you are having.

Hope that points you in the right direction. :slight_smile:

1 Like
3

Ok thanks, I’ll take a look at it

4

hmm, i tried changing from absolute to relative but it doesnt seem to do any change. sorry if this is supposed to be an easy fix im just starting out on webflow

https://preview.webflow.com/preview/pocono-organics?utm_medium=preview_link&utm_source=designer&utm_content=pocono-organics&preview=92fac87927aee698d1a5942e7d3a39aa&mode=preview

5

No worries mate.

Sorry I wasn’t a bit clearer in my last message…

Since your navbar is set to absolute, the rest of the content will ignore it.

So you could either make your navbar static, and bring it into the rest of the layout flow, which means other blocks will interact with it normally. Or you could adjust the other content on different sizes to account for it.

So you could add some margin to your hero text to push it down. The problem your going to have with tablet landscape though and using VH is that your don’t actually have much height. And in Webflow you can’t easily set different breakpoints for tablet landscape or portrait like mobile.

Simplest fix would probably be to use your mobile menu on tablet too. Not much needed then to make adjustments.