Header not bein responsive in mobile

Design help General
1

How can I fix the header so that Sign up button doesn’t overlap with site Title in Mobile view. In desktop view, its all spaced out and looks ok. I tried re-aligning the title to the left but that didn’t work. Another way: Is there a way to get sign up to be invisible ONLY in mobile view?

image
image541×256 16.5 KB

image
image1551×297 28 KB

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

Published: www.meetviv.com

2

Hi there,

The overflow:hidden property can help prevent elements from overlapping across different viewport sizes. You can apply this CSS property to a container element to ensure its contents stay within its boundaries. To implement this:

  1. Select the container element that needs containment
  2. In the Style panel, locate the Overflow section
  3. Set the overflow to “Hidden”

For mobile-specific visibility control, you can use Webflow’s Display settings in the Style panel. Under Display, choose “None” for the mobile breakpoint to hide elements specifically on mobile devices.

You can learn more about managing overflow in this University lesson on overflow:hidden.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Thanks, changed the overflow to hidden for both Title Viv Health and Sign up Button. They aren’t overlapping anymore. But the Viv Health word gets cut off. Is there a way to make it visible, maybe shrinking the text size on the mobile breakpoint only?

image
image480×784 44.9 KB

4

And one more thing - how can I get this grid section to be an auto-scrolling section instead of a having manual scroll? I want the user to see the list moving when they get to this part of the website.

image
image550×799 38.8 KB

6

And one more thing - how can I get this grid section to be an auto-scrolling section instead of a having manual scroll? I want the user to see the list moving when they get to this part of the website.

7

Hey @milar55,

Yes, you could decrease the font-size of ‘Viv Health’ specifically by setting the appropriate size in Typography under style settings after you select the relevant mobile breakpoint in the Webflow designer so that the text is visible on smaller devices.

1 Like
8

And you could simulate the auto-scroll experience by using Webflow custom interactions, here’s an example tutorial which you could probably take inspiration from.

1 Like