Streaming live at 10am (PST)

My tabs work great on desktop but go weird on iPad and beyond


#1

Hi folks.

After coming to Webflow with zero design experience, I've found it incredibly intuitive and enjoyable to use. However, recently I've hit a stumper which I can't seem to solve myself. I hope and suspect there's a simple solution so here I am appealing to your expertise!

For the Products section of my copywriting website I've set up clickable tabs to view the various types of service we provide. This works great for the desktop query:

However when previewed for iPad and iPhone the buttons go a bit funky. When I click them they seem to expand, making the web content button on the right-hand-side disappear altogether. This means it's impossible to browse through the panels. I can't really show this with screenshots so here's the preview:

https://preview.webflow.com/preview/jonironmonger?preview=49ed5c6ce66c69dcf959c57dac39dd06

Any help or advice greatly appreciated!
Allbest,
Jon


#2

It's something in your Product Tab. When removed, the problem goes away.

But removing the class... only removes the hidden problem further down the chain.

See Video
http://quick.as/xpwasZBdO

FYI - You have a lot (many many) of unused classes. Not just on the Desktop resolution but on every resolution many objects. I would start removing them. They just complicate things. Removing them will help you identify the problem. That's what I do. You seem to be classing a lot of elements as well... that don't really need to be classed (but of course I don't your plans / intension. If they don't need to be classed... don't class them)

See Videos
http://quick.as/6Y5khQ4wp

http://quick.as/WAJ7igXrO
You also have a tab within a tab. Are you planning multiple nested tabs ?

See Video:
http://quick.as/aOkwFa1m8

You have the entire Body "centered". I personally wouldn't do that.

However, when you remove the Center... it causes it other issues that you must deal with.

I would center the other objects a different way. Perhaps centered within a full (which is default) div.
See Video:

http://quick.as/p0xksd9Or

Your Percentage Width in the tabs is causing an issue... and your 0 Margin in the Current Tab as well.

See Video

http://quick.as/WAJ7igXrO

And just one last video to show you the center and %margins working differently

http://quick.as/zQPWfqQ7D


#3

Wow, thank you so much for this - a lot to work through. I had a feeling things were getting a bit messy, a combination of impatience, lack of experience and just trying to make things work whatever way I can.


#4

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