Tab issue not responsive

Hello, I’ve been trying to use tab but it doesn’t work on mobile phone, the choices on tab overflow so we can’t use it.

Also, when I change something on phone, pc follow.

Hey Yasmine, could you provide a read-only link to your project so we can look into the specifics of your project? :smiling_face:

Here is the steps on how you can generate one: Share a read-only link | Webflow University

Sure :[…]c59ad6474e&pageId=63064212527403f6e4fb3856&workflow=preview

Thank you! :handshake:

I’ve taken a look through your setup, and I haven’t been able to pinpoint exactly what stylistic changes you have made to the Tabs, but this is caused by a few different design settings in Tabs Menu 3, rather than something in Tabs Content.

If you set Tabs Menu 3 to have a width of 100vw then it at least stops the content overflowing on the right-hand side, but shrinks the buttons (Tab Links) because of the Padding/Margin Settings on them, which is likely a factor in the issues you are facing:

Shared with CloudApp
You could probably fix these issues by adjusting the sizing/margin/padding on Tabs Menu 3 and The Tab Link buttons, such as setting a width value of 100vw on Tabs Menu 3 and adjusting the margin on the buttons. However, I think it might be easier to start from scratch and rebuild the Tabs with a new instance of the Tabs element, since the Webflow tabs element is responsive by default and doesn’t usually behave this way. If you’re making any changes, make sure you check them on Mobile as you go along to ensure that it stays responsive :raised_hands:

Generally speaking, it’s best to avoid making too many changes to Webflow’s ‘prebuilt’ elements (Tabs, Navbar etc) that affect the layout and positioning of elements, as some changes can break functionality or cause weird visual behaviour like this.

Hope this helps!

Thanks a lot, also, do you know how I can make modification on mobile phone only without affecting computer ?

Not a problem! :smiling_face:

Any style changes that you make in the style panel :arrow_upper_right: while on the Mobile breakpoints should not affect the stylings on Desktop, whereas any changes that you make on Desktop will flow down to Mobile. Any changes you make in the Navigator :arrow_upper_right: will change across all Devices though :raised_hands:

You can check out these lesson on breakpoints/mobile only changes for some more info too:

BTW, I also noticed that you have a lot of Unused classes on your project, so I would recommend performing a class cleanup on your project. This will help with reducing the amount of unused code (which can help with load time) and keep things tidy in the project: How to delete unused Classes from a Webflow Site :arrow_upper_right: