Adding rows with different columns in Tabs

Support
#1

Hi there,

I am trying to add some shortcodes to tabbed content; essentially I need two rows. Row 1 needs two columns, and Row 2 needs one column.

I can add two columns straight into the tabbed content, but I am having trouble adding another row beneath this.

The shortcodes I am using for the columns are:

[column type=“one-half” last=“true” fade=“true” fade_animation=“in” fade_animation_offset=“45px”] Here is column #1 [/column]

[column type=“one-half” last=“true” fade=“true” fade_animation=“in” fade_animation_offset=“45px”] Here is column #2[/column]

Is there a way I can add another single column row underneath this?

Thanks so much for your help!

Brad

#2

Hi Brad,

Try to wrap it in rows.

eg.

[cs_row marginless_columns="false"]
	[column type="1/2" last="true" fade="true" fade_animation="in" fade_animation_offset="45px"] Here is column #1 [/column]
	[column type="1/2" last="true" fade="true" fade_animation="in" fade_animation_offset="45px"] Here is column #2[/column]
[/cs_row]

[cs_row marginless_columns="false"]
	[column type="1/1" last="true" fade="true" fade_animation="in" fade_animation_offset="45px"] Here is column #1 [/column]
[/cs_row]

Hope that helps.

#3

Hi there,

Thanks for this support - I have added it in to the Tabs element (first tab) and yes it adds two rows into the tab which is great. Unfortunately it seems to show all content from the other tabs in shortcode down below; when I click on the other tabs, nothing changes.

Any thoughts on how I might fix this?

#4

Hello There,

I have edited the contents of your tabs and made use of this shortcode content instead:

[x_container marginless_x_columns="false"]
	[x_column type="1/2" last="true" fade="true" fade_animation="in" fade_animation_offset="45px"]<a class="twitter-timeline" href="https://twitter.com/CarbonMarketIns" data-widget-id="646496743056510976">Daily News by @CarbonMarketIns</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>[/x_column]
	[x_column type="1/2" last="true" fade="true" fade_animation="in" fade_animation_offset="45px"][custom_headline type="left" level="h3" looks_like="h3" class="man"] CMI Member News[/custom_headline][ess_grid alias="member-news"][/x_column]
[/x_container]

[x_container marginless_x_columns="false"]
	[x_column type="1/1" last="true" fade="true" fade_animation="in" fade_animation_offset="45px"] Here is x_column #1 [/x_column]
[/x_container]

Please check your site now.

#5

Oh that is wonderful! Thanks so much! You and your team are the best. :grinning:

I do have a couple of other questions. In the site’s custom CSS (Appearance/Customise/Custom/Global CSS) I have the following code, which ensures that there is no padding in tabbed content (full width of Tab):

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

It works for other tabs in the site, but doesn’t seem to be affecting the shortcode one. Is there a [padding-left=“0px” padding-right=“0px”] that would go into a shortcode somewhere?

Also I need there to be a gap between the two columns - is there a shortcode that can have the column container switched on (that has the same effect as the column container On/Off button in the Cornerstone side panel?

Thanks again for all your help…it really is invaluable!

Thanks,
Brad

#6

Hi Brad,

It is not a padding but rather container width. Container shortcode width and max-width is getting it’s settings from Theme Options. To override it, we can use inline CSS. Try updating this line:
[x_container marginless_x_columns="false"] with this [x_container marginless_x_columns="false" style="max-width: initial; width: 100%;"]. On your setting it is set to be 90% of the container only.

For the GAP between columns remove this part last="true" on the first column shortcode. That options remove the right margin on the columns.

Hope this helps.

#7

That worked perfectly - thanks so much for the advice! :grinning::grinning::grinning:

#8

You’re welcome! :slight_smile:

#9

where do you look to find this code to change it?

#10

Hi @jrpetro,

Thanks for writing around! I believe you’re not using shortcodes on your page because you’ll find the above code in your page’s content if you’re using shortcodes (see http://demo.theme.co/integrity-1/shortcodes/container/). To do this in Cornerstone, inspect Row and add inline CSS max-width: initial; width: 100%; in style field.

Hope this helps!