Community forum for knowledge and support

Updated 7 months ago

Tabs going bonkers on mobile with layout 507

At a glance

The community member is using Layout 507 with tabs on their website, and they are experiencing issues with the tabs on mobile devices. The tabs appear oversized and messy. The community member has provided a link to their website and is offering $100 for an easy fix. In the comments, another community member has provided a solution, stating that they had to change the height and width to 100% on the element with the class 'layout_507-card', which is the element that is hidden/shown when switching tabs. The issue was that the component was made to have the same sized content in each tab, but the community member's tabs had varying heights.

Useful resources

Help Wanted:

So I'm using Layout 507 (with tabs) and on mobile, the tabs go bonkers. It seems like maybe the tab content needs to be the same length in all the tabs for it to work properly? But that's kind of wack.

Here's my site for you to view: https://parttwobooking.webflow.io/artists/casper-kit -- It looks great on desktop, but on mobile is where the issues are. The tabs themselves get oversized and it's just kind of messy. Let me know if you can help. I'll pay $100 if someone can just give me an easy fix. Thanks!

N
M
K
4 comments

Hey, sorry I already fixed it. If anybody is searching and has the same issue, I had to change height & width to 100% on the element with class (from component) 'layout_507-card' – It's the element that is hidden/shown when you switch tabs.

The problem was it looks like the component was made to have the same sized stuff in each tab, where my tabs are all very different heights.

Thanks!

Thank you for the feedback ! We're going to look into this πŸ™‚ Really appreciate it

Add a reply
Sign up and join the conversation on Slack