[PanInternationalParticipant]

Hi,

I would like to know how can I divide part of one column in two columns? (as shown in attached image)
I have a section divided in two columns, and I want the bottom part of one of those columns to be divided in two columns (25% / 75%)

What is the best way to achieve this result?

Thank you

[Paul RModerator]

Hi,

You can achieve that by using columns shortcodes.

http://demo.theme.co/integrity-1/shortcodes/columns/

Create a section with two columns, then inside you first columns you can insert a text element with the following code.

[column type="1/4"] Place your content in here. [/column] [column type="3/4" last="true"] Place your content in here. [/column]

Hope that helps.

[PanInternationalParticipant]

Hi,

Thank you for your reply. That does the trick roughly.
But as you can see (image) the right column with the two headings don’t look great, because I don’t know how to edit the margins.
As you can see the top example (image) there’s space for everything (even for those buttons), and in the bottom example the headings margins don’t look good.

Is there a easier way of making the bottom left box look like the top one?

Thank you

[PanInternationalParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

To further assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[PanInternationalParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

You can add inline style to adjust the margins of your heading.

eg.

<h2 style="margin-top:0;">SplatFest</h2>

Hope that helps.

[PanInternationalParticipant]

Hi,

Sorry, where do I add that scc code?
Please notice, that I just want to adjust this specific headings.

Thank you

[PanInternationalParticipant]

Ok, I notice where to add the code and changing the numbers, gives the look that I wanted, but brings new problems.

It’s the first time that ThemeX is letting me down with the lack of solution for such a simple problem.
I will need to find a different solution, because this one is not sustainable.

Thank you for your help

[FriechModerator]

Hi There,

Lets write it on a plain HTML markup instead. Add a RAW content element underneath the Video element, and paste the code below on it.

<div class="x-container custom-onehalf-col">
	<div class="x-column x-sm x-1-4">
		<img src="http://culturalinfusion.org.au/wp-content/uploads/2016/11/splatfest_icon.png" />
	</div>
	<div class="x-column x-sm x-3-4">
		<h6 class="mtn">JOKO'S WORLD</h6>
		<h2 class="mtn">SplatFest</h2>
	</div>
</div>

Let us know if there is any adjustment needed, it should be easier now since we added a custom class on the container.

Hope it helps, Cheers!

[PanInternationalParticipant]

Hi,

Thank you Friech, that did the trick! 🙂
A little bit more complex than I was expecting, but it works!

Suggestion: Cornerstone should give us similar freedom (columns inside columns)

Cheers

[FriechModerator]

Hi There,

Glad that helps. Yes a lot of user requested that nested column before, but it was on the plan that Cornerstone won’t be supporting nested columns as this leads to increasingly complex layouts, resulting in a more complicated interface (eventually breaking the layout) just for the sake of supporting a few edge cases.

If absolutely needed user can use a raw content element with shortcodes or plain HTML markup to create a nested layout. Just like what we did.

Cheers 🙂

[PanInternationalParticipant]

Yes, I understand.
I was checking this raw changes and even though they work in bigger screens, they dont look good in smaller screens which mean they are not very responsive. (as you can see on the link)

Any suggestion?

Thank you

[PanInternationalParticipant]

This reply has been marked as private.

[LelyModerator]

Hi There,

I am little bit confuse. To help you better, please do give us screenshot of the specific section and how you want it to display on specific window size.
Content by default are aligned left and images are displayed 100 percent of their size. Then on smaller screen size, columns are set to be 100 percent. So since you have smaller image, and text are shorter it will just display on the left side of the column and will leave extra space on the right. In that case we can add class center-text like below so the space is balance on smaller screen:

<div class="x-container custom-onehalf-col">
	<div class="x-column x-sm x-1-4 center-text">
		<img src="http://culturalinfusion.org.au/wp-content/uploads/2016/11/splatfest_icon.png" />
	</div>
	<div class="x-column x-sm x-3-4">
		<h6 class="mtn">JOKO'S WORLD</h6>
		<h2 class="mtn">SplatFest</h2>
	</div>
</div>

Hope this helps.

[Author]

Posts