Vertical Tab display on mobile device

Support
#1

Hi there,

The vertical tabs work perfectly as wanted on the desktop. But when checking today on mobile phone, there aren’t all tabs shown. It has only the 1st tab on. Screenshot here.

Secondly, I keep only left border line on which is fine on the desktop view. Again, the left border line doesn’t cut off at the end of the content. It leaves too much space underneath content.

I tweaked css the below class
.e2-8 .x-tabs-panel {
border-width: 0 0 0 1px;
border-style: solid;
border-color: rgba(0,0,0,0.15);
padding: 1.5rem;
font-family: inherit;
font-size: 1em;
font-style: normal;
font-weight: 400;
line-height: 1.4;
letter-spacing: 1.25px;
background-color: rgba(255,255,255,1);
box-shadow: none;
}

#2

Hi @Symbiosis,

I tried the code you have posted but I am not able to replicate the vertical tabs that have you mentioned.

It might be easier for us to provide a suggestion if you can also post a link to the page that you are working on so that we can check since you are trying to add a custom CSS. So kindly post the link to the page as well.

Thank you.

#3

Sorry here is the link.

Thanks

#4

Hi @Symbiosis,

Thank you for the URL. Many mobile browsers don’t show the scroll bars by default until you start scrolling. Same is the case with scroll bar in tabs, mobile device browser hides it by default and it gets visible when you scroll through the tabs horizontally.

I checked your site on mobile device and the tabs scroll by tapping and swiping to the left. The tabs are there. You just need to swipe/scroll on it. Something like this: https://screencast-o-matic.com/watch/cqX31CUw5R

#5

Thanks.

Here is another question that I am waiting for your suggestion.

Many thanks.

#6

Sorry forgot the screenshot in the previous message.

#7

Hi @Symbiosis,

It’s because of the equal height options and it follows the tallest tab. The solution is add this CSS as well

@media ( max-width: 767px ) {
$el .x-tabs-panels {
height: auto !important;
} 
}

Hope this helps

#8

Hi there,

Many thanks for the code. I’ve tried it as seen from my attached screenshot. I added the code on the Compost info page. It worked in the x Pro builder view but when I checked on Samsung Note 9 it doesn’t work there. The left border line doesn’t cut off at the end of image or around that area.

Thank you.

#9

Hey @Symbiosis.,

You’ve added the code in Content CSS. The code provided by Rad should be added in the Element CSS. Specifically, it should be added in the Tab’s Element CSS.

Hope that helps.

#10

Hi there,

All good. Works well thanks very much.

#11

You’re welcome!

#12

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