Docs

[philip_pape]

I have placed the following shortcode within a Tab in Cornerstone to show 3 columns of content. However, the columns are not 100% width so they are horizontally squished together (see screenshot). I would simply like these to take up the full width of the tab area.

[container]

[column type=”1/3″ last=”true” fade=”true” fade_animation=”in” fade_animation_offset=”45px”] Here is column #1 [/column]

[column type=”1/3″ last=”true” fade=”true” fade_animation=”in” fade_animation_offset=”45px”] Here is column #2 [/column]

[column type=”1/3″ last=”true” fade=”true” fade_animation=”in” fade_animation_offset=”45px”] Here is column #3 [/column]

[/container]

[Christian]

Hey there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[philip_pape]

This reply has been marked as private.

[Paul R]

Hi,

Thank you for providing your login credentials.

You can try this code instead.

[container style="width:100%;"]
[column style="margin-right:4%;" type="1/3" last="true" fade="true" fade_animation="in" fade_animation_offset="45px"] Here is column #1 [/column]
[column style="margin-right:4%;" type="1/3" last="true" fade="true" fade_animation="in" fade_animation_offset="45px" ]Here is column #2 [/column]
[column  style="margin-right:0;" type="1/3" last="true" fade="true" fade_animation="in" fade_animation_offset="45px" ]Here is column #3 [/column]
[/container]

Hope that helps.

[philip_pape]

I tried the code with the same result. They are still squished together.

[philip_pape]

This reply has been marked as private.

[philip_pape]

I found this solution online using raw code, but I’m still hoping you can provide a solution using shortcodes:

[Friech]

Hi There,

You cant nest a column with a shortcode, please write it in plain HTML instead.

<div class="x-container marginless-columns nested">
<div class="x-column x-sm x-1-3" style="background-color: red">SOME CONTENT HERE 1</div>
<div class="x-column x-sm x-1-3" style="background-color: blue">SOME CONTENT HERE 2</div>
<div class="x-column x-sm x-1-3" style="background-color: green">SOME CONTENT HERE 3</div>
</div>

Then add this on your custom css to make the tab content container full width.

.x-tab-content .x-tab-pane {
	padding-left: 0;
	padding-right: 0;
}

Hope it helps, Cheers!

[philip_pape]

Yes, that worked perfectly. Thank you!

[Prasant Rai]

You are most welcome. 🙂

[philip_pape]

This works great on a desktop, but on a mobile device I would like the tabs to stack vertically like the “Tab” element does automatically. Right now, they appear horizontally and with 18 tabs it is not usable. Thanks!

[Rue Nel]

Hello There,

Please update the code and use this instead:

<div class="x-container marginless-columns nested">
<div class="x-column x-1-3" style="background-color: red">SOME CONTENT HERE 1</div>
<div class="x-column x-1-3" style="background-color: blue">SOME CONTENT HERE 2</div>
<div class="x-column x-1-3" style="background-color: green">SOME CONTENT HERE 3</div>
</div>

This will make the columns stacked up on smaller screens. Please let us know how it goes.

[philip_pape]

Thank you. That seems to work on small mobile devices but not tablets (I think I can just apply CSS styling based on screen size for that).

However, my main question was how to make the actual tabs stack up. I’m referring to what the user clicks to switch between tabs (not the content inside the tab).

[Christopher]

Hi there,

please update previous code to :

<div class="x-container marginless-columns nested">
<div class="x-column x-1-3 x-sm" style="background-color: red">SOME CONTENT HERE 1</div>
<div class="x-column x-1-3 x-sm" style="background-color: blue">SOME CONTENT HERE 2</div>
<div class="x-column x-1-3 x-sm" style="background-color: green">SOME CONTENT HERE 3</div>
</div>

Find this code :

.x-nav-tabs.eighteen-up>li {
    width: 5.555555555555556%;
}
.x-nav-tabs>li {
    float: left;
    border-right: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
}

And update it to :

@media(min-width:767px){

.x-nav-tabs.eighteen-up>li {
    width: 5.555555555555556%;
 float: left;
}
}
.x-nav-tabs>li {
     border-right: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
}

Hope it helps.

[philip_pape]

Yes, that’s much better. Although it’s not an accordian-style, the tabs at least move to new lines to maintain their size on a mobile device, so that’s a big improvement. Thanks!

[Author]

Posts