Support reply may delay for 3 weeks due to corona virus outbreak, please send us email to support@pickplugins.com
0
Vertical to horizontal on mobile 1
julia
Aug 31, 2017 12:21 AM 2 Answers General
Member Since Aug 2017
Subscribed Subscribe Not subscribe
Flag(0)

Hello. I have vertical tabs set up, but I want them to change to horizontal (or stacked on top of each other with content below each tab) on mobile. How can I make this happen?

2 Subscribers
Vertical to horizontal on mobile 1
Vertical to horizontal on mobile 3
Submit Answer
Please login to submit answer.
2 Answers
Sort By:
Best Answer
0
Vertical to horizontal on mobile 4
PickPlugins
Aug 31, 2017
Flag(0)

Can you please add following CSS to fix vertical tabs turn accoridon in small screen.

@media screen and (max-width: 600px) {

.tabs-container {
  width: 100% !important;
}

.ui-tabs-vertical .tabs-content {
  padding: 1em;
  float: none;
  width: 100% !important;
  padding: 0;
}

.ui-tabs-vertical .tabs-content p {
  padding: 10px;
}

}

Regards

 

 

 

 

Vertical to horizontal on mobile 5
julia
- Sep 04, 2017 05:58 PM
Flag (0)
0

Hello. Are you able to help with my above query (Aug 31 2017 06:26 PM)? Thanks!

Vertical to horizontal on mobile 5
julia
- Aug 31, 2017 06:26 PM
Flag (0)
0

Thanks for the reply. This kinda worked – the vertical tabs turned accordion, but all the content is at the bottom of all the tabs, rather than the content for each tab showing underneath each tab. Is there a way to make the content for each tab show directly under it on smaller screens?

Sign in to Reply
Replying as Submit
Best Answer
0
Vertical to horizontal on mobile 4
PickPlugins
Aug 31, 2017
Flag(0)

Welcome to our forum.

For the small screen tabs will turn as accordion. please see the screenshot

View post on imgur.com

 

Regards

Vertical to horizontal on mobile 8
PickPlugins
- Aug 31, 2017 10:40 AM
Flag (0)
0

Can you please check my new answer, please try CSS I wrote for you.

Regards

Vertical to horizontal on mobile 5
julia
- Aug 31, 2017 04:03 AM
Flag (0)
0

Hi, thanks for your reply.

My tabs don't turn on small screens – how can I make this happen? What settings do I need in place? Will this work if the tabs are set to vertical?

Sign in to Reply
Replying as Submit