Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 29, 2024 at 3:44 pm #1432399
    frb1

    Hi Enfold crew,

    Is there any way of controlling/adjusting how the tab section is positioning on mobile? I have 4 sections with images. I’d really like them to just position next to each other, and perhaps smaller. Also it seems like it changes the tab title style as well?

    If you look below the gallery on the attached page.

    January 30, 2024 at 6:38 am #1432449
    Ismael

    Hey frb1,

    Thank you for the inquiry.

    The site is on maintenance mode and is not accessible. Please provide the login details in the private field. Could you also provide screenshots of the changes that you’d like to implement?

    Best regards,
    Ismael

    January 30, 2024 at 9:21 am #1432465
    frb1

    Hi Ismael,

    Oh sorry, of course :) Disabled maintenance mode now.

    Basicly, I just want the tabs to look like tablet and desktop breaks, like the image link provided. It seems to use other code for the mobile break?
    How can I adjust mobiel tab look?

    This is my custom code:

    /*TAB SECTIONS*/
    .av-tab-section-container {
    background-color: #ffffff;
    }
    .av-tab-section-tab-title-container {
    background-color: #ffffff;
    }
    .av-inner-tab-title {
    font-family: baskerville-urw, serif;
    font-size: 0.9em;
    line-height: 1.5em;
    font-weight: 300;
    font-style: italic;
    text-transform: none;
    display: block;
    margin-top: 7px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: transparent;
    }
    .av-active-tab-title .av-inner-tab-title {
    position: relative; /* Ensure proper positioning */
    }
    .av-active-tab-title .av-inner-tab-title::after {
    content: “”; /* Empty content for pseudo-element */
    position: absolute; /* Position the line */
    left: 0; /* Align with the text */
    right: 0; /* Align with the text */
    bottom: -3px; /* Adjust the space between text and line */
    border-bottom: 1.5px solid; /* Create the line */
    }
    /*Remove greyscale from inactive tabs*/
    .av-tab-section-image {
    filter: opacity(100%) !important;
    }
    /*Increase tab spacing*/
    #top .av-section-tab-title {
    padding-right:7px!important;
    padding-left:7px!important;
    }

    January 30, 2024 at 11:44 am #1432487
    Rikard

    Hi,

    Thanks for the update, the link you posted is still showing a coming soon page though. Did you set that as your maintenance mode page in the theme options maybe?

    Best regards,
    Rikard

    January 30, 2024 at 1:33 pm #1432496
    frb1

    Hi Rikard,

    Strange. I deactivated some one.com plugins, now it works! Please check again…

    Br Frederik

    January 30, 2024 at 7:29 pm #1432536
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

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

    Best regards,
    Rikard

    January 31, 2024 at 10:20 am #1432579
    frb1

    Thanks for the try. This does not make a difference. Ant other idea to why it won’t accept my custom code on mobile?

    Example:

    My custom code that works everywhere above 479 pixels:

    .av-inner-tab-title {
    font-family: baskerville-urw, serif;
    font-size: 0.9em;
    line-height: 1.5em;
    font-weight: 300;
    font-style: italic;
    text-transform: none;
    display: block;
    margin-top: 7px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: transparent;
    }

    The CSS that seems to overide below 479 pixels:

    .av-inner-tab-title {
    text-transform: uppercase;
    display: block;
    line-height: 1.2em;
    margin-top: 7px;
    margin-bottom: 3px;
    font-size: 13px;
    text-align: center;
    }

    February 1, 2024 at 4:35 pm #1432752
    Rikard

    Hi,

    It looks like you placed the CSS inside a media query? This is what I see in the browser:

    @media only screen and (min-width: 479px) {
  .av-inner-tab-title
{
    font-family: baskerville-urw,serif;
    font-size: 0.9em;
    line-height: 1.5em;
    font-weight: 300;
    font-style: italic;
    text-transform: none;
    display: block;
    margin-top: 7px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: transparent;
  }
}

    Best regards,
    Rikard

    February 1, 2024 at 5:19 pm #1432755
    frb1

    No, just checked. No media query… like on the screen provided. Should I do that or?…

    February 2, 2024 at 8:43 am #1432798
    Ismael

    Hi,

    There might be an extra or missing curly brace causing the CSS rule to be wrapped in a css media query. You can validate the css here: https://www.cssportal.com/css-validator/

    Best regards,
    Ismael

    February 4, 2024 at 10:13 pm #1432949
    frb1

    Hi Ismael,

    You’re right! Found the missing curlybrace :) I guess I’ll figure it out from here, thankyou! :)

    /Frederik

    February 4, 2024 at 11:25 pm #1432952
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Tab sections on mobile’ is closed to new replies.