Columns layout problems - Pro 1.2.7

Hello,

Since updating to new version, I can’t get my head around how to build layouts for pages anymore. This was something easy before but now there are a few options that I can’t find. I tried looking for videos or tutorials for this new version but I can’t find either.

I need to replicate this simple page http://community.lungfoundation.com.au/ and I can’t find how to setup:

  1. How can I modify spacing between columns?
  2. How can I setup a fixed height for all columns (regardless of content) so they all have the same height.

Hi There,

1.) You can use Paddings:

2.) Please check this guide: https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272

Although, the best approach to achieve that might be to use block grid element: http://demo.theme.co/integrity-1/shortcodes/block-grid/

Hope this helps.

Thanks for the quick reply :slight_smile:

  1. padding doesn’t work as expected for me as it also shrinks the width of each column. I only want to make the gap between columns smaller. What am I doing wrong?

  1. OK. Thanks

Hi there,

You will need to use the Custom CSS to make the margin smaller. Please kindly go to the section which you have the columns and then click on the Customize tab and you will see an option to add Class:

There you can use one of our helper classes:

Or add a Custom CSS code to X > Launch > Options > CSS:

.THECLASS .x-column {margin-right: 0;}

Change THECLASS with the class you add in the input box of the sections options.

Thank you.

Thanks! Why was this option removed from the builder? It was easier to do this using the visual builder rather than CSS :frowning:

I managed to make it better by adding this CSS as you suggested. I also added width to make the boxed a bit wider…

.column_gap .x-column {
margin-right: 10px;
width: 173px;
}

One more question…
I can’t seem to find how to reduce this gap any further

Hi there,

The option that you are talking about is the No Margin option which was there before. We will inform our development team regarding this and make your voice heard for the option.

The section which you took the screenshot seems to be the one in the section itself. You can use the same CSS Class helpers in the section to have the effect you like.

But for the more detailed answer, we will need to have access to your WordPress Dashboard. Please get back to us with the URL/Username/Password of your website using the Secure Note functionality of the post.

Also kindly give us the page name which you work on to follow up.

Thank you.

I found the problem Christopher!

Theme Options / Layout and design / Site layout = Boxed and Site width % = 80% I changed that to 100% and that margin disappeared :slight_smile:

Thank you for putting the request through to the developers to bring the “No Margin option” back :slight_smile:

Glad you’ve sorted it out.

Quick question: Is there any way of copying formatting for a column?

ie. I added BG, shadows, border radius, margins, padding etc to one column an have to replicate format to another 4 columns.

Hi,

Sorry, there is no way to copy it, you will have to do it manually.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.