Classic tabs with responsive settings

Support
#1

Hi guys
I have a classic tab set up which I need some help with @ 767px and below I am not able to select the first tab, I believe I need to move the tab element down in the section but Im not sure which is the correct element to do this with
URL: https://evidentli.com/

#2

Hi Phil,

Thanks for writing in! I have checked below 767px, and I was able to click on first tab.

Is it on a specific browser or a device that you’re having this issue? So that we can look into it further.

Thanks!

#3

Iphone, and developer tools on Chrome

#4

Hi again,

I checked your tab element and it seems like the bottom separator of the above section is overlapping with the first tab. Try this: give your tabs element a class e.g tabs-margin and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
    .tabs-margin {
        margin-top: 50px;
    }
}

Let us know how this goes!

#5

Hi support that is applying it to both the head and the content independently. I think you need to only apply it to the head, can you please advise

#6

Hi Phil,

Instead of adding a margin, try increasing the z-index of the section element where your tab element resides.

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Hope that helps

#7

Hi Paul
If I dod that will that not hide the separators that are sitting above the background this section
thanks Phil

#8

Hi There,

Please update the previous CSS to thisL

@media screen and (max-width: 979px) {
    ul.tabs-margin {
        margin-top: 30px;
    }
}

Hope it helps :slight_smile:

#9

Thanks guys works a treat

#10

Glad we could help.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.