Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 23, 2023 at 9:49 am #1414106
    ivanglaser

    Hi

    If you look at the url below, you will see the Tab Section containing the 2 descriptions “Colour” and “B&W” is too high

    How do I reduce the height?

    Is there a way I can bring the words “Colour” and “B&W” closer together?

    Tx

    Ivan

    • This topic was modified 1 year, 5 months ago by ivanglaser.
    July 23, 2023 at 1:40 pm #1414124
    Rikard

    Hey ivanglaser,

    Please try the following in Quick CSS under Enfold->General Styling:

    .av-tab-section-tab-title-container {
  padding: 0;
}

    Best regards,
    Rikard

    July 23, 2023 at 2:46 pm #1414133
    ivanglaser

    Hi. Thanks. It made a small difference
    But take a look at how it shows on a Mobile device now…
    Why is there such a large gap between the 2 tabs?
    Is there any way to make the text as typed ? It seems to convert to uppercase

    July 23, 2023 at 6:36 pm #1414152
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) { 
#top .av-section-tab-title {
  padding: 10px 0 0 0;
  width: 200px;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    July 23, 2023 at 11:30 pm #1414177
    ivanglaser

    Thanks it seems to work if I use 100px value rather than 200px. Take a look at the URL above on a mobile device and see what you think

    How can I make the text not be in capital letters. I prefer propercase (where only first letter of each word is capitalised)?

    Is there no way to make the height tab title row height lower ? It looks out of proportion

    Thanks

    Ivan

    • This reply was modified 1 year, 5 months ago by ivanglaser.
    July 25, 2023 at 12:19 pm #1414364
    Mike

    Hi,
    To remove the text-transform so the text shows as it is typed in the backend, and to lower the text some, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .av-inner-tab-title {
	text-transform: none;
}
#top .av-tab-no-icon.av-tab-no-image .av-inner-tab-title {
    margin-bottom: 0;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    July 27, 2023 at 3:36 am #1414599
    ivanglaser

    Thanks a lot
    You can close this
    Ivan

    July 27, 2023 at 7:17 am #1414610
    Nikko

    Hi Ivan,

    I’m glad that Mike could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘adjust height of Tab Section’ is closed to new replies.