Sidebar tabs break apart on mobile? « Support Forum | Kriesi.at

Support Forum » Choices

Sidebar tabs break apart on mobile?

3 posts from 2 voices

Started 3 months ago by dishdesigner
Latest reply from dishdesigner
This topic is closed
This topic is resolved

Tags:

dishdesigner
Member

Hi Kriesi:

I've noticed that the full-page width sidebar tabs I'm using on a test website's homepage (URL = http://www.wolfmaisontest.com) break apart when viewed on mobile devices (or on a desktop browser stretched to a very narrow width).

I suppose this is inevitable due to the limited width of mobile screens!

But, as you can see, they break apart into separate tabs in a rather ugly and non-readable way. Clicking on the separate tabs opens them without scrolling the page to the tab content's beginning. Worse, a nested multi-column layout within a sidebar tab does not wrap the text within! (see the "Services" tab...)

What would be GREAT is if there were some way to edit the theme such that a set of sidebar tabs are CONVERTED to Toggles (with one visible) when viewed on a mobile device (or narrow desktop browser). That might keep the tabs connected and open them for a viewer more smoothly....

That's probably pretty complicated code, though!...?

Best, - Darrin Hunter

Posted 3 months ago #
Devin
Moderator
Hey Darrin,

That wouldn't be possible. The shortcode converts the item to its html output (the tabs in this case) and it isn't something that can be done on the fly for mobile.

You can either deactivate the responsive design in the theme options or choose a different type of shortcode to output your layout.

To clean up the columns inside the tabs, you can Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
.responsive #top .sidebar_tab_inner_content .one_third {
width: 100%;
}
```
I'll mark the idea for Kriesi to add in additional responsive width to the column shortcode when inside other shortcodes.

Regards,

Devin
Posted 3 months ago #
dishdesigner
Member

Thanks for the CSS thought, Devin.......I added a margin to the tag as well, and that cleared it all up!
Best, Darrin

Posted 3 months ago #