Screen responsiveness of 'tabs' (and other elements)

Question

Hello

Can you please advise how to ensure responsiveness when using your tabs shortcodes (and various other elements) for multiple device types?

http://themes.semicolonweb.com/html/canvas/tabs.html

In utilising them on my page, they don't shift size naturally when looked at on mobiles/tablets and would be helpful to know what the appropriate method is here, before venturing to code something different (such as media query etc)

I'll add the webpage below in a confidential reply.

Thanks for the help.

SemiColonWeb · Accepted Answer

Hello,

It is highly recommended to use the Responsive Tabs when using the Tabs Shortcode so that they are more intuitive and user friendly on Mobile Devices as they transform into an Accordion.

Simply add the .tabs-responsive Class to the .tabs Element and everything should work fine automatically.

Regarding the Buttons, the long button you are using on the Page is too long, but you can consider using an Alternate Button with a Shorter Text and hide it on Larger Devices by using the Bootstrap Display Utility classes: http://getbootstrap.com/docs/4.1/utilities/display/ . Then you can display the Shorter Button in Smaller Devices and hide the Long Button.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BGDwth · Answer

As you can see here many elements including the buttons (streams etc) (but more importantly) the tabs - mid-morning session, late afternoon sessions etc - don't respond when viewed on different screens. Don't wish to try to change this if something is already clearly encoded elsewhere. Please advise why.

Thanks!

http://capitalmarketsevents.com/sire/agenda.html