Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 7, 2018 at 11:43 am #1007062
    tocal

    Hello,

    I am having some issues with the tab section of the builder.
    The actual tab content is fine, however the tab title area is causing some problems.
    (Attached in the private area I have linked some screen shots to help visualise what is happening).

    At desktop view, the tab title container is holding 6 items, each equally apart with some text. however I needed the content of these tab titles to be larger than what the standard size is of a tab title. However the container is not growing to fit the content. I have adjusted the css in multiple different ways to help this, however one fix causes issues with something else, i.e forcing the tab title to have a larger width causes problems with the scrolling feature on smaller devices.

    Effectively, I need these tab titles to work as they would be default however automatically allowing the content of the titles to be large or small and still retaining an equal margin between one another as keeping a scroll on smaller devices.

    A link attached in the private area can be found directly to the page I mentioned.

    Thank you

    September 7, 2018 at 4:30 pm #1007181
    Victoria

    Hey tocal,

    The thing is the tab title is supposed to be an icon and a few words, not more than that.

    Best regards,
    Victoria

    September 7, 2018 at 5:40 pm #1007220
    tocal

    Hi Victoria,

    Thanks for your reply. I know we’re stretching what the element can do a bit but is there a way you can help us make the content fit? The way it works below 1140px width would work but we can’t find how to apply this behaviour to the larger screen sizes.

    Thanks!

    • This reply was modified 6 years, 2 months ago by tocal.
    September 7, 2018 at 6:11 pm #1007242
    Victoria

    Hi tocal,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 1024px) {
   .av-inner-tab-title strong { 
        height: 27px;
    }
    #team_tabs .av-section-tab-title {
        white-space: normal;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 9, 2018 at 5:59 pm #1007640
    tocal

    That’s not going to help give the title element a max-width though? That’s just going to force the tab titles to overlap.

    We’re looking to have the width of the tab title area adapt to accommodate the width of the elements. It looks great at full width. We just want to preserve that look at lower sizes by having the tab-titles element be scroll-able instead of shrinking.

    September 11, 2018 at 10:15 am #1008301
    Dude

    Hi,

    To be honest it would be possible to adjust the content of the titles to be large or small based on the screen size but it would require quite a lot of work and testing. Basically you would need to write a custom javascript which calculates the ideal width for each tab title and which resizes the title of the tab if the ideal width changes (i.e. because the screen size changes). Writing and testing such a function is quite complex and beyond the scope of our support forum. Pleae hire a developer for this task.

    Best regards,
    Peter

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.