Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 13, 2019 at 6:53 pm #1078333
    maxgorelkine

    Hello,
    I’ve noticed that while it’s possible to target a tab in the “tab element” on desktop ( min-width: 768px ), these tabs lose their specific css (.tab_counter_1, .tab_counter_2, etc.) on screens widths lower than 767px, when it changes to an accordion.
    So it becomes impossible to force different colors for each tab.
    Is there a solution for this?

    Thanks a lot!
    Max

    March 18, 2019 at 4:03 pm #1079926
    Basilis

    Hey maxgorelkine,

    When they loose their tab class, they do get a new class, which you can target for lower screen sizes.

    Best regards,
    Basilis

    March 18, 2019 at 4:39 pm #1079963
    maxgorelkine

    Hi, Thanks for your answer… unfortunately they all get the same class .fullsize-tab so I can’t differentiate them and apply a different color to each tab…

    March 20, 2019 at 7:27 pm #1080977
    Victoria

    Hi maxgorelkine,

    Could you please give us a link to your website, we need more context to be able to help you.

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    April 1, 2019 at 4:28 pm #1085565
    maxgorelkine

    Hello Victoria,
    Here is the exemple for desktop where each tab has a “tab_counter_1”, “tab_counter_2”, … class which allows me to target each tab separately and apply a different background color:

    And the same tab element on mobile where each tab loses it’s specific counter class and becomes just “fullsize-tab”, which makes it impossible to target each tab separately. I tried to use :nth-child() but it doesn’t seem to work.

    Thanks a lot for your help!

    • This reply was modified 5 years, 7 months ago by maxgorelkine.
    April 1, 2019 at 6:10 pm #1085604
    Jordan Shannon

    Hi,

    Please provide an actual link to the site so we can inspect the page ourselves and try to provide accurate code.

    Best regards,
    Jordan Shannon

    April 1, 2019 at 9:50 pm #1085715
    maxgorelkine

    Hi Jordan,
    Here is the link :

    Thanks in advance!
    Max

    April 2, 2019 at 9:15 am #1085951
    Victoria

    Hi maxgorelkine,

    You can target them with the css like this:

    
@media only screen and (max-width: 767px) {
  #top .tabcontainer .tab.fullsize-tab[data-fake-id="#tab-id-1"] {
      background: rgba(208, 83, 83, 0.7);
  }
    #top .tabcontainer .tab.fullsize-tab[data-fake-id="#tab-id-2"] {
      background: rgba(216, 206, 77, 0.7);
  }
}

    Best regards,
    Victoria

    April 2, 2019 at 10:21 am #1086001
    maxgorelkine

    Hi Victoria, you are amazing, it works like a charm!
    Thank you so much for your amazing support as always!
    Long live Kriesi! (and Enfold ! ;))

    • This reply was modified 5 years, 7 months ago by maxgorelkine.
    April 3, 2019 at 3:16 am #1086296
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Target single tab via css in "tabs element" on mobile’ is closed to new replies.