Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 8, 2021 at 4:49 pm #1286486
    fkm

    Hi, Enfold team.

    For large screens I was able to costumize the tabs exactly as I wanted, but unfortunately I don’t know how to do for mobile devices as well.
    Please help.

    Thanks in advance.

    Best regards
    fkm

    March 10, 2021 at 7:06 am #1286988
    Rikard

    Hey fkm,

    What exactly are you looking to change in the mobile layout? Please try to explain your intentions a bit further, or post a screenshot highlighting your intentions.

    Best regards,
    Rikard

    March 10, 2021 at 10:44 am #1287035
    fkm

    Hey Rikard,

    first of all, please excuse my poor explanation.

    I use tabs on my website (please see link below) and have already tried to adapt them to my website (changed font sizes, changed spacing and margins, removed borders etc.). This also worked well for viewing on large screens.
    However, it looks a little different on small screens (please see screenshots): here you can still see borders and the tab titles are much smaller.
    Also the title of the active tab disappears completely.
    I think I made a mistake somewhere.

    Please let me know how to fix it.

    Thankis in advance.

    Best regards
    fkm

    March 11, 2021 at 10:27 am #1287353
    Nikko

    Hi fkm,

    Can you try adding this CSS code in Enfold > General Styling > Quick CSS:

    @media only screen and (max-width:767px) {
  .responsive #top .main_color .tabcontainer .active_tab {
    background-color: #1a1a18 !important;
  }

  .responsive #top .tabcontainer .tab {
    background-color: #ccc !important;
    border-top: 1px solid #000 !important;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    March 11, 2021 at 2:37 pm #1287435
    fkm

    Hi, Nikko.

    Thank you very much for the CSS code.
    This helps al lot because I could make important changes with it.

    Still there are a few things that I would like to fix (please see screenshots/link):
    1. Remove the black border
    2. Remove the orange frame around the active tab titles (this is shown in blue on the iPhone)
    3. Get the same space below the text at the tabs content (these are currently different in size – highlighted it in red at the screenshots)

    Please continue helping.

    Thanks in advance.

    Best regards
    fkm

    March 12, 2021 at 4:45 am #1287573
    Nikko

    Hi fkm,

    Thanks for providing a screenshot and detailed instructions, please use this CSS code instead:

    @media only screen and (max-width:767px) {
  .responsive #top .tabcontainer.top_tab {
    border: none;
  }

  .responsive #top .main_color .tabcontainer .active_tab {
    outline: none;
  }

  .responsive #top .tabcontainer .tab_content .hr-invisible {
    display: none;
  }
}

    Best regards,
    Nikko

    March 12, 2021 at 11:18 am #1287635
    fkm

    Hi Nikko,

    Thank you for your quick response.

    With this CSS code all issues disappeared and I could just made every single change exactly as I wanted.
    Just great – thank you so much!

    Best regards
    fkm

    March 13, 2021 at 12:42 pm #1287939
    Nikko

    Hi fkm,

    We’re happy that we could help :)
    Thanks for using Enfold and have a great weekend!

    Best regards,
    Nikko

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