Decided to try this tab widget and so far it’s been hit or miss.
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
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
On desktop tabs res set to 942px, works OK, but you can remove this value or set it to auto or 100%.
http://vincent.polenordstudio.fr/snap/e1vw1.jpg
On tablet, it’s set to… 942px too.
http://vincent.polenordstudio.fr/snap/3cwpj.jpg
Set it to 100%.
http://vincent.polenordstudio.fr/snap/ay72f.jpg
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.
http://vincent.polenordstudio.fr/snap/a3qir.jpg
back to tablet, deal with padding
http://vincent.polenordstudio.fr/snap/9adyz.jpg
Continue adjusting for mobiles
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.
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.
Did either of you guys have a suggestion on my follow-up?
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
