Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 15, 2016 at 2:22 am #583050
    Stephenvato

    Hey Enfold Team!

    I have a 4 tabs element in a page, just below a section of 4 column of equal width.
    Right now, all the 4 tab tiles are stacked on the left side and their widths are determined by the text length of each tab tiles.

    How can I set the width of each tab tile individually or have the 4 of them of same width and evenly spread/stretched on 100% of the page content width?

    Thanks in advance for your help!
    Steph.

    February 15, 2016 at 1:43 pm #583386
    Yigit

    Hi Steph!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .SB-Accord-4Diets .tab {
    width: 25%;
}

    Best regards,
    Yigit

    February 16, 2016 at 1:38 am #583843
    Stephenvato

    Hi Yigit!

    Thanks a lot for your help. It works great.

    The other design issue I”m facing is concerning the active tab background color.
    I would like both the active and inactive tabs to have a white backgroung (as well as the active tab content).
    Right now, I’m missing the white backgroung for the active tab : it is light grey for desktop screen size and blue of mobile devices.

    Thanks in advance to let me know how you would close this gap!

    Steph.

    February 18, 2016 at 1:35 am #585041
    Stephenvato

    Hey Gentlemen!

    I can’t imagine my question about my tab background color being too sharp for you guys …
    I’ve tried differents things I found on this support forum, without great success.
    Of course, I could live without this fine tuning, but I’ve good hope to be fully pleased!

    Thanks for your help and have a great day,

    Steph.

    February 18, 2016 at 2:11 am #585054
    Yigit

    Hi!

    Please add following code to Quick CSS as well

     div .main_color .tabcontainer .active_tab_content, div .main_color .tabcontainer .active_tab {
    background-color: white;
}

    Cheers!
    Yigit

    February 18, 2016 at 12:31 pm #585334
    Stephenvato

    Thank you Yigit!

    We’re getting there: it works fine for large screens but has no effect on mobile devices.
    On mobiles devices, the active tab background color stays blue and the active tab content keeps off-white as by default.
    I’m OK with the off-white for the tab content, but the blue of the active tab is a bit far from my expectations!

    I’ve also tried the following:
    .js_active .tab_content { background: white; }
    and: .tab.tab_counter_0.active_tab { background-color: white; }

    Whitout success …

    Thanks and have a nice day,
    Steph.

    February 18, 2016 at 12:58 pm #585362
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .responsive #top .main_color .tabcontainer .active_tab {
    background-color: white !important;
}

    Regards,
    Yigit

    February 18, 2016 at 2:43 pm #585409
    Stephenvato

    All good! Thanks a lot Yigit!

    This topic can now be closed.
    Wish you a nice week-end.

    Regards,
    Steph.

    February 18, 2016 at 2:47 pm #585412
    Yigit

    Hey!

    You are welcome! Glad we could help :)
    Let us know if you have any other questions or issues and enjoy your weekend!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Tab element – Adjust width of tab tiles’ is closed to new replies.