Streaming live at 10am (PST)

My Tabs Have Gone Crazy ... Help


#1

Decided to try this tab widget and so far it's been hit or miss.

https://preview.webflow.com/preview/bokfinancialfinancialplanning?preview=32379a4573fa88a1bfd883c9ffdca05f

In desktop it looks OK (below) ...

In tablet I start loosing the tabs (below) ...

In phone it officially looses it's mind changing sizes, placement and such (below) ...

Any help how to fix this mess would be greatly appreciated.

Greer


#2

You main problem is that you are using fixed units for your widths.

942px for your wrapper, just remove this a leave it auto.

188px on the tab link class, change this to 20%.

As you move down in view points make sure your tab link class and current class have a 20% width. Also reduce the padding as the view point gets smaller.

Remove the radius you have give your tabs in mobile landscape.

On mobile portrait give your tabs a width of 100%.

Let me know how it goes,

Alex


#3

On desktop tabs res set to 942px, works OK, but you can remove this value or set it to auto or 100%.

On tablet, it's set to... 942px too.

Set it to 100%.

Adjust the size of the tabs: go back to desktop, select a tab, click the class icon to unflod the classes list, select the class that affect all tabs (tab link) and change the 188px value to something in % (I put 18, you have 5 tabs and borders). ut a height too so it deals with different numbers of text lines.

back to tablet, deal with padding

Continue adjusting for mobiles


#4

Vincent and AlexN to the rescue. Thanks guys. Made sense.

Since you guys are in super hero mode ... is there a way on tablet for me to reduce the height of my photo so that I can get more of the horizontal image to show? I've got room above "TAKE THE FIRST STEP" to move everything up if it's possible.

Also toward the bottom, I've dropped some text and an image inside a link box. This is causing the text "ADVISOR TRUST SERVICES" to underline. In the style manager, the underline option isn't enabled so not sure why it's doing this and how to remove it.


#5

Vincent and AlexN to the rescue. Thanks guys. Made sense.

Since you guys are in super hero mode ... is there a way on tablet for me to reduce the height of my photo so that I can get more of the horizontal image to show? I've got room above "TAKE THE FIRST STEP" to move everything up if it's possible.

Also toward the bottom, I've dropped some text and an image inside a link box. This is causing the text "ADVISOR TRUST SERVICES" to underline. In the style manager, the underline option isn't enabled so not sure why it's doing this and how to remove it.


#6

Did either of you guys have a suggestion on my follow-up?


#7

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