Adjust the display of the tabs

Hi,
I tried to adjust the display of the tabs on the home page in the different display, but I could not do it. can you help me please !


the "tabs with" button does not work for this module and I know why ?

Hi

Please tell me the url to the page where I'll be able to see this problem.

Hi,
I'am sorry i forgot to show you the URL ! http://www.aidepharmacien.ma

About the problem, it can that it displays correctly in your screen but especially not in small screens offices.

Hi

I's too narrow columns for 3 tabs, try set them one under the other with this code:

Code: Select all

@media only screen and (min-width:841px) and (max-width: 1325px) {
#gk-tab-1 .gkTabsWrap.vertical ol li,
#gk-tab-1 .gkTabsWrap.horizontal ol li {
float: none;
}
}


Hello teitbite,
for the first time, I will not take your answer ! because I always prefer to have the unit tabs horizontally. i'am sorry for That.
in the other hand, I tried to solve this problem by adjusting the width of the sidebar. "right and left"
instead of "left sidebar with = 19,15%" I put "left sidebar with = 20,15%"

how you found as solution ? it may pose some problem to the template site ?

thank you so much for you answer

Hi

You may change the width of sidebar in template configuration, but Your site look ok right now and after resizing main area it may not look that good anymore.

Simply sidebar it too narrow to have more than 2 tabs there.
I would advice to get rid of tabs and post this modules one under the other or maybe change the names on tabs with images or symbols.

Hi teitbite,
the idea of replacing the names with the images is great but I do not see how?

Hi

You will need an extra css code:

Code: Select all

#gkSidebarLeft .gkTabsWrap.vertical ol li {
    border: medium none;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: -999px;
    width: 33%;
    background: none no-repeat center center transparent;
}

#gkSidebarLeft .gkTabsWrap.vertical ol li:nth-child(1) {
background-image: url(path to image 1);
}

#gkSidebarLeft .gkTabsWrap.vertical ol li:nth-child(2) {
background-image: url(path to image 2);
}

#gkSidebarLeft .gkTabsWrap.vertical ol li:nth-child(3) {
background-image: url(path to image 3);
}


Hi teitbite,
your code works fine. I tested and the display is much better. I'm just looking images suitable to replace texts

thank you so much. you are the best !

Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro