Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 4, 2018 at 12:50 am #936872
    webWahine

    Hello
    I’ve looked at many posts and still can’t get the horizontal padding between my tab titles to be smaller. I think it’s connected to the min-width 540px element but I can’t get it to work. I’d like to have a very horizontal small padding from one to the next since I’m only using ’01’ ’02’ etc for titles, and at the moment there is a large horizontal space between 01 and 02 etc. Here’s my code so far, below. Thank you in advance :)

    /************************ TAB SECTIONS ************************/
    /* title band */
    .av-tab-section-tab-title-container {
    background-color: #ff5057;
    }

    .avia-tab-title-padding-default .av-outer-tab-title {
    padding: 0px !important;
    }

    .av-tab-no-icon.av-tab-no-image .av-inner-tab-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 5px 0px;
    }

    .av-inner-tab-title {

    }

    #top .av-section-tab-title {
    color: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
    }

    #top a.av-active-tab-title {
    color: #000;
    }

    April 4, 2018 at 2:38 am #936881
    Mike

    Hey webWahine,
    Try this code in the General Styling > Quick CSS field:

    .av-inner-tab-title, .av-tab-section-icon, .av-tab-arrow-container, .av-tab-section-image {
    width: 40px !important;
}

    expected results:
    2018-04-03_203709

    Best regards,
    Mike

    April 4, 2018 at 4:44 pm #937292
    webWahine

    Perfect! Thanks so much :)

    April 4, 2018 at 6:31 pm #937339
    webWahine

    Hello, again
    I’ve now changed the titles to text from numbers so need a bit more help with mobile styling, please. I’ve removed the arrow and set the text to align left but when you click on a title all of the titles move around a bit horizontally. Can this be removed? It would actually be great to stack the titles instead of having them on two lines – I tried that but it kept disappearing – again, I assume it has to do with the clicks and the movement. Thanks!

    April 5, 2018 at 6:05 am #937473
    Mike

    Hi,
    Please try:

    @media only screen and (max-width: 460px) { 
#av-tab-section-1 .av-inner-tab-title,#av-tab-section-1 .av-tab-section-icon,#av-tab-section-1 .av-tab-arrow-container,#av-tab-section-1 .av-tab-section-image {
    width: 80px !important;
}
#av-tab-section-1 .av-tab-section-tab-title-container {
    padding-left: 25px !important; 
    padding-right: 0px !important; 
}
#av-tab-section-1 .av-section-tab-title {
font-size: 10px !important;
}
}

Best regards,
Mike
    April 5, 2018 at 8:15 pm #937884
    webWahine

    Thanks, Mike but it’s still jumping and the text is not stacked vertically. I targeted just this page, so added in the code, below. I want it to appear like this –

    STUDIO
    1 BD
    2 BD
    2 BD + DEN
    3 BD

    Thanks again!

    /* older plans page to stack titles */

    .page-id-197 #av-tab-section-1 .av-inner-tab-title,
    .page-id-197 #av-tab-section-1 .av-tab-section-icon,
    .page-id-197 #av-tab-section-1 .av-tab-arrow-container,
    .page-id-197 #av-tab-section-1 .av-tab-section-image {
    width: 80px !important;
    }

    .page-id-197 #av-tab-section-1 .av-tab-section-tab-title-container {
    padding-left: 25px !important;
    padding-right: 0px !important;
    }

    .page-id-197 #av-tab-section-1 .av-section-tab-title {
    font-size: 10px !important;
    }

    April 9, 2018 at 11:25 am #939074
    Ismael

    Hi,

    The tab section is not visible on mobile view. Did you use additional modifications? Please provide a screenshot of the mobile layout that you have in mind.

    Best regards,
    Ismael

    April 9, 2018 at 6:33 pm #939345
    webWahine

    Sorry, but it’s still there.

    http://8888osler.com/images/mobileTabs.jpg

    As you see it’s still a list but I’d like have the titles stacked, left, just like this –
    STUDIO
    1 BD
    2 BD
    2 BD + DEN
    3 BD

    April 10, 2018 at 9:55 pm #940031
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 480px) { 
.page-id-197 #av-tab-section-1 .av-section-tab-title {
    display: block;
}}

    Best regards,
    Yigit

    April 10, 2018 at 10:03 pm #940037
    webWahine

    That’s made it stacked but it loads and then immediately disappears! Odd – perhaps something to do with the animation again?

    April 10, 2018 at 10:05 pm #940038
    webWahine

    I tried opacity and that didn’t work either –

    .page-id-197 #av-tab-section-1 .av-section-tab-title {
    font-size: 10px !important;
    display: block !important;
    opacity: 1 !important;
    }

    Perhaps it’s a line height issue? Thanks, again! :)

    April 11, 2018 at 10:24 pm #940672
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    .js_active .av-tab-section-tab-title-container {
    left: 0!important;
}

    Best regards,
    Yigit

    April 11, 2018 at 11:17 pm #940682
    webWahine

    That worked! Thank you very much, Yigit :)

    April 12, 2018 at 12:12 am #940698
    Jordan Shannon

    Hi,

    I’m glad you were able to get this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Adjust horizontal space between tab titles’ is closed to new replies.