Responsive support for Tours

[akalra]

Hi —

Just getting started with using Dante for a client project.

I noticed that the responsive support for “tours” (vertical tabs) is pretty spotty. This is what it looks like on an iPhone5-sized screen:

(attached)

Is there an updated version of the theme with better support?

Love Dante so far, but a large part of why we picked it for this project was so that we wouldn’t have to worry about checking responsiveness of each and every component across browsers. 🙂

Thanks!

Ankur

[Kyle – SUPPORT]

Thanks for spotting this, will let the developer know. For now you can try this custom css:

@media only screen and (max-width: 480px) { 
.nav-tabs > li {
  width: 100%;
}
.spb_tour .nav-tabs {
  width: 100%;
  margin-bottom: 20px;
}
.spb_tour .tab-content {
  padding-left: 0;
}
}

– Kyle

[akalra]

Thank you Kyle — that helps, specifically for that break-point. iPhone5-landscape (568px), iPad-portrait (768px), etc still look a little funny.

What would it take to get a comprehensive fix?

Thanks!

Ankur

[Kyle – SUPPORT]

Just increase the max width from 480 to whatever you like.

– Kyle

[akalra]

Sorry, I should have been clearer.

I can use the media-queries to make the tabs full-width at 568px or whatever, but I’m hoping there’s a different, better visual treatment for iPads? They have a lot more room, but the spacing with the current styles just look funny.

Is there different CSS we can apply for the intermediate breakpoints (iPad-portrait for example) that possibly does something different and more appropriate?

Thanks!

Ankur

[Kyle – SUPPORT]

Please screenshot what you mean by ‘They have a lot more room, but the spacing with the current styles just look funny.’ ?

– Kyle