[ehsdParticipant]

I’d like to add a 4 column area for text in Cornerstone. I was thinking I could just add the bootstrap classes to my HTML in a text element, but it seems X uses customized Bootstrap classes. Is there a way to add the equivalent of col-lg-3 to my divs or is there a reference to the X class names needed?

I don’t really like the columnize element and want a bit more control over layout. Maybe I’m thinking about this the wrong way and should be adding the columns to the existing section (row)?

[RadModerator]

Hi there,

Thanks for writing in.

You can’s use Bootstrap classes, but you may use X’s equivalent.

x-column x-1-1
x-column x-1-2
x-column x-1-3
x-column x-1-4

and so on.

Cheers!

[ehsdParticipant]

Ok. X uses percentage instead of bootstrap’s 12 column grid? For now I set the row to have 3 columns and added text elements to each. One problem seems to be adjusting the padding/margin between columns.

[FriechModerator]

Hi There,

Although X|Theme has different classes for columns than bootstrap, It works just the same. Yes, instead of coding your own columns inside the text element, utilize the columns that is provided by the ROW. You can adjust the column padding by inspecting it.

You can use the CLASS or STYLE field to adjust the margin, however that would be a little tricky since the width of you’re column will be affected.

Hope this shed some lights.

Cheers!

[ehsdParticipant]

Yes, thanks. When I inspect the column, padding is at 0px. I have a narrower column of text links in the middle column that has extra space on the right. Margins and padding for the right are set at 0px on the text, column row and section. When inspecting it, it looks like the content box is taking up the full width of the column. I may need to set a specific class for that column to adjust the extra padding. I want to decrease the extra padding created by centering the column in the row to give some extra space to the other 2 columns which have longer links if that makes sense.

You can see what I’m talking about at ehsd.org in the “quicklinks” section at the top of the homepage.

[RadModerator]

Hi there,

I’m not really sure about that, would you mind providing a mockup design? Are you trying to manipulate the columns width so the center will appear bigger than both sides?

Thanks!

[ehsdParticipant]

More of the opposite — reduce the center column width to allow more space for columns 1 & 3. So currently all columns are 33%. I guess I need to somehow get the center column to 25% (or perhaps 20%) So maybe I can get what I want by making the columns 40% + 20% + 40%.

[LelyModerator]

Hi There,

Thank you for the clarification.
We can use CUSTOM layout for columns in Cornerstone Section:

Hope this helps.

[ehsdParticipant]

Thanks. thirds may end up being the best. I’m forever trying to ways to shorten link lengths with this site (local government site). 😉

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts