Responsive Tab Element Styling

Support
#1

Hello!

I have a tab element on a page that looks great, but on mobile it’s not responsive. Can you help me with the CSS I would need to make the whole tab element responsive (including the tabs themselves)?

#2

Hi Frank,

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area.

.x-tabs-list {
    width: 100%;
    font-size: 55%;
}

Hope that helps.

#3

Thank you for the quick response! That worked perfectly for the tab navigation, but the body isn’t responsive. It is populated with recent posts shortcode if that helps.

#4

Hi Frank,

Please add this CSS as well

@media ( max-width: 767px ) {
.x-recent-posts .h-recent-posts, .x-recent-posts .x-recent-posts-date {
    white-space: normal;
}
}

Hope this helps.

#5

Worked perfectly! Thank you! I love Theme Co for this very reason. Probably why I’ve purchased over 20 licenses. :slight_smile:

#6

You’re most welcome Frank! :slight_smile:

#7

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