Tabs – Responsiveness

[gtdesign]

I have built a series of tab sections throughout my website and they work great, however on mobile, it looks horrible. Any chance of looking at it to see what I could do to fix it?

There are several pages, but here is just one:

http://www.rosenberryseptic.com/pre-cast/

Thanks,
Andy

Topic

[Jason Bobich]

Hi,

You could maybe try styling them to be full-width on mobile. This should get you started with your customizations:

@media (max-width: 767px) {	
  .nav-tabs > li {
    border: none;
    float: none;
    margin: 0;
  }
  .nav-tabs > li > a {
    border: none;
    border-radius: 0;
    margin: 0;
  }
  .nav-tabs > li.active > a, 
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    background: #fff;
    border: 1px solid #ddd;
  }
}

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

[Author]

Replies