Vertical to horizontal on mobile

We have renamed Post Grid plugin to Post Grid Combo
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

http://imgur.com/a/tMe7i

 

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