Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1007062

    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

    #1007181

    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

    #1007220

    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, 3 months ago by tocal.
    #1007242

    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

    #1007640

    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.

    #1008301

    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

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