Docs

[cmdev]

Please view the page below on Mobile.

The code that you had sent me to style the tabs seems to be preventing the tabs from working correctly on mobile.
they currently are only appearing at half of the mobile browser. How do you correct this?

http://beta.triflight.com/passenger-guide/

[Rupok]

Hi there,

Would you clarify which code you are referring? Can you point the thread? Also let us know how you want this on mobile.

Cheers!

[cmdev]

Here is my code that was provided for styling the tab width

.x-nav-tabs.left, .x-nav-tabs.right {
width: 35% !important;
background-color: #FFFFFF;
max-width: 500px !important;
}

What I want it do on mobile is attached.

I’d like the tabs to expand down on mobile.

[Rupok]

Hi there,

Thanks for writing back. You can add the code inside a media query so it won’t interfere with mobile view :

@media only screen and (min-width: 768px) {
.x-nav-tabs.left, .x-nav-tabs.right {
  width: 35% !important;
  background-color: #FFFFFF;
  max-width: 500px !important;
}
}

Hope this helps.

[cmdev]

Can that be added globally?

[cmdev]

This did not seem to work.

[Rupok]

Hi there,

Your code will be applied for dekstop only and won’t affect the mobile view. That’s exactly what the code will do. You need to replace your code with the code I have suggested. Let me know what’s exactly not working.

Thanks!

[cmdev]

I see.
When i add your code the tabs still are only half-page on mobile screen. See attached.

I need them to be full width of the container. See 2nd attached photo.

[Rad]

Hi there,

Please add this as well,

@media (max-width: 767px){
.x-nav-tabs.left, .x-nav-tabs.right {
    width: 100% !important;
    max-width: 100% !important;
}
}

Hope this helps.

[Author]

Posts