Make the Tabs GK5 3 big buttons

Hello Team,
I wonder if in the Tab GK5 module I can do this?
https://drive.google.com/file/d/0B2bFIlJ3GJEgUnNDUjVWRU1MU1U/edit?usp=sharing


Till now I add some CSS code to stablish the width

Code: Select all

.gkTabsWrap.horizontal ol li {
 text-align: center;
  width: 46.45%;

But is not the same like in the image. Can you tell me if I'm missing something?

My website is: http://www.funwebsing.com/
I really appreciate your help! Happy fathers day!!!

Hi

Do You mean to split the width equaly between the titles ?

Try add this to override.css and make sure override is enabled:

Code: Select all

#gk-tabs-692 .gkTabsWrap.horizontal ol li {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 33%;
}


Hey,Thankssss, the code worked perfect, but I ended up with this:

Code: Select all

.gkTabsWrap.vertical ol li,
.gkTabsWrap.horizontal ol li {
 box-sizing: border-box;
    -moz-box-sizing: border-box;
height: 50px;
   border-left: 1px solid #DDDDDD;
    color: #666666;
    cursor: pointer;
    float: left;
   
    list-style: none outside none;   
    text-align: center;
   font-size: 18px;
    margin: 0;
    padding: 15px;
    transition: all 0.2s ease 0s;
    width: 33.33%;
}

Maybe I put unnecessary code,what do you think?
I have to big problems now that maybe you can help me with:
1- The override folder I just found ONE and It is in the template folder, not in modules/tabsgk5. How I can put that code in the override so when I update I don't loose my changes? I set up CSS override enabled too in my template.
2- How I can make my text font bigger in the boxes, exactly the way is in the image you can see on my before post. I tried with

Code: Select all

font-size: 18px;

But didn't work

Sorry for the big letter, I'd really appreciate your help,
You guys are the best!!!

Hi

Use override.css inside template. During template update just store it outside of the server and override again when update will be done. That's the easiest way.

Your code is ok, I would just add one small detail, since tabs style got corrupted:

Code: Select all

.gkTabsItem.gk-slide_vertical.gk-active {
    left: 0;
}


Depends where You want to resize the font. If this should be global, than try:

Code: Select all

body {
    font-size: 18px;
}


Hi,
Thank you so much for your help. It worked perfect. When I was asking you about making bigger the font of my texts, I'm referring the texts of the Tabs. I tried with

Code: Select all

font-size: 18px;

but it doesn't work. I'd like to do it like in this image
https://drive.google.com/file/d/0B2bFIlJ3GJEgUnNDUjVWRU1MU1U/edit?usp=sharing

Am I missing something?
One more time thank you for your help, I really appreciate it!
Best regards!

Hi

An image is not showing, but code to resize text inside GK Tabs is:

Code: Select all

.gkTabsItem {
    font-size: 20px;
}


Hey? Hi again,
Im so sorry to bother you again. Unfortunately, that last code you posted doesn't work. It works for the text you put in the tabs, but what I'd like to do is make the FONT of the TITLE of the TABS bigger. For example, you can see in my website http://funwebsing.com/ I have First Tab, Second tab, and Third Tab right? Well What I'd like to do is set FIRST TAB, SECOND TAB, and THIRD TAB. I already tried with all the code that you, very gently posted to me, but that code only works for the text you insert inside each tabs, not for the Title of the Tabs. I'd like to do exactly as this website: http://www.hudsonhorizons.com/

Another problem I have is that when I try my website in my iphone the tabs don't behave responsible. Do you know if I'm missing some code?
Thank you, Thank you, and Thank you so much for your time, I'll promise don't bother you at lease during the next three days...

Hi

I missunderstood You. Here is a code to enlarge titles in tabs:

Code: Select all

.gkTabsWrap.vertical ol li,
.gkTabsWrap.horizontal ol li {
    font-size: 20px;
}


About responsive please add this to mobile.css file:

Code: Select all

.gkTabsWrap.vertical ol li,
.gkTabsWrap.horizontal ol li {
width: 100%;
}


Hi,
Thank you so much for your help. I really appreciate it. I'll try that.....Have a wonderful day