Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 26, 2016 at 3:17 am #589546
    steveshiver

    Hi Enfold Team,

    I saw this post about evenly spreading out tabs …
    __________________________________________________________
    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?
    __________________________________________________________
    The solution offered (which worked for the user) was this code added to the Quick CSS:
    .SB-Accord-4Diets .tab {
    width: 25%;
    }
    __________________________________________________________

    I have the same situation but with 3 tabs. I attempted to take this code and change it to work with 3, but alas “no”. How do I accomplish this?
    Also, how does this setting affect other Tabs elements on the site?

    Thanks for your help!
    Steve

    February 26, 2016 at 3:13 pm #589840
    Yigit

    Hey Steve!

    Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your tabs element a custom class and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .your-custom-class .tab { width: 33%; }

    If that does not help, please post the link to your page.

    Regards,
    Yigit

    February 26, 2016 at 3:43 pm #589853
    steveshiver

    Thanks for the quick reply, Yigit.
    That caused the entire tab element to be 33% of the width of the entire page.

    What next?

    Steve

    February 26, 2016 at 3:46 pm #589854
    steveshiver

    whoops. forgot to post the link.
    suiteflow.com/wp

    Thanks,
    Steve

    February 26, 2016 at 4:27 pm #589868
    Yigit

    Hi!

    Please use the code as following 

    .srs-hometab1 {
    width: 100%;
}
.srs-hometab1 .tab {
    width: 33%;
}

    Cheers!
    Yigit

    February 26, 2016 at 4:45 pm #589880
    steveshiver

    Rock on, Yigit! That did the trick. I’m beginning to figure this out … I’ve never coded CSS before; just a dumb database guy ;).

    One question: why do I have to place “!important” after some pairings? (I’ve noticed some don’t work without it)

    Thanks,
    Steve

    February 26, 2016 at 4:58 pm #589887
    Basilis

    Hey!

    !important is giving priority to the rule, over other rules, so the browser does read that part.

    !important CSS Declarations: How and When to Use Them

    Please do let us know if we can do anything else for you, we will be more than happy to help.

    Best regards,
    Basilis

    February 26, 2016 at 5:02 pm #589890
    Yigit

    Hey Steve!

    You are welcome Steve.
    I found a good explanation here :)

    Best regards,
    Yigit

    February 26, 2016 at 5:37 pm #589906
    steveshiver

    @basilis @Yigit

    Thanks guys!

    Steve

    February 26, 2016 at 5:57 pm #589917
    Yigit

    Hi!

    You are welcome!
    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Enjoy your weekend!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘How do I make Tabs justified’ is closed to new replies.