Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 21, 2017 at 6:37 pm #811103
    zimbo

    Please have a look at this screenshot.

    This is a 5 tab element at 820px wide in Chrome Developer Tools. It does not look good.

    Enfold does not responsively ‘stack’ the tabs one above the other until below 768px wide.

    The tabs display in one row until approx 1016px, then the last tab ‘Streetview’ is forced below, as seen in the image. The second last tab Map is forced down around 800px.

    I can put a bottom border back on the tabs to override some CSS in shortcodes.css which removes it, e.g.

    .js_active .top_tab .tab {
    border-bottom: 1px #e0e0e0 solid;}

    but I’m not convinced this looks any better.

    How can I get the tabs to vertically stack from a wider screen size, e.g. 1020px?

    June 21, 2017 at 8:07 pm #811135
    Victoria

    Hey zimbo,

    Could you please give us a link to your website, we need more context to be able to help you. Do you mean the tab titles or tab content?

    Best regards,
    Victoria

    June 21, 2017 at 9:02 pm #811160
    zimbo

    Look at this page.

    View it at the screen sizes I quoted, between approx 1020px and 768px using Developer Tools.

    The last tab title, then the second to last, get wrapped below the top ‘line’ as the screen width decreases, which looks poor because there’s no bottom border plus it’s not as clear as it could be which is the active tab when compared to standard desktop mode.

    I can add a bottom border via the CSS I quoted in the OP which is better but I still think it looks naff if I do that – as does my client – so we want to vertically stack the tabs at a higher screen size than the Enfold default of 768px. Just need to know the correct element & media query to make this happen please.

    June 22, 2017 at 4:19 pm #811639
    Victoria

    Hi zimbo,

    This is the code from shortcodes.css that will do the trick, I just adjusted the size:

    
@media only screen and (max-width: 1024px)  {
	.responsive .tabcontainer{border-width: 1px; border-style: solid; border-top:none; overflow: hidden;}
	.responsive .tabcontainer .tab_titles{display:none;}
	.responsive .tabcontainer .tab_content, .responsive .tabcontainer .tab
	{width:100%; max-width:100%; border-left:none; border-right:0;left:0; top:0; min-height: 0!important;}
	.responsive .tabcontainer .tab_content{border-bottom:none; padding:15px 30px; clear: both; }
	.responsive .tabcontainer .tab.fullsize-tab{ display:block; margin-bottom:-1px;}
	.responsive .top_tab .tab.fullsize-tab{ margin-bottom:0px;}

}

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.