Adjust spacing between 1/3 1/3 1/3 row

Hello, Rikard

That didn’t work either – if you look at the page it did indeed make the center 1/3 with the plan2 class less wide (now they are not even widths, so that’s not the right option, as they need to be equal widths), but there is now even more vertical spacing. I’ve changed the border to orange just to show where it sits. Based upon other posts (which I tried but couldn’t get to work), it should be something like margin-left: 2% for the 2nd and 3rd 1/3 col, and margin-left: 0px for the first, with slight adjustments to the col widths. Please advise. Thanks again!

/* not working */
.plan2 {
border-left: 10px solid #ff3300 !important;
border-right: 10px solid #ff3300 !important;
width: 30% !important;
}

Hi Victoria

Yes, that is clear, as suggested by Rikard, and without adjusting the margin-left as well it’s not addressing my issue. Again, referring to my page in the private area, I simply want to have a vertical space between the middle column and the first and last, eg 10px or 20px (currently in orange, just for testing), with all three columns equal in width AND height. The rows are set to have no margin, align top, equal height.

I f you look at the page’s center column, which has a class assigned to it called ‘.plan2’ it’s doing something to the height – in the first row there is what looks like a 20px white space at the bottom, and in the second row the button also looks about 20 px higher, even though the content is identical (see the following screenshots).

Row 1

Row 2

I looked at a lot of other posts and the resolution appears to be a combination of a width slightly less than 33.3% plus a width of 2% for the margin-left except for the first column. I tried that but it didn’t work, but does seem like the best option.

Thanks again; I hope we can resolve this soon :)

Ok, thanks for clarifying. How do I create a row of 3 columns with some spacing between them, then, please? Eg 10 or 20px. Thanks again :)

Hi again

Sorry to be a pest – I know about those settings. The problem is on my page I want all three columns to be –

– equal width
– the same white space between left border, right border and columns, eg 50px –
50px – 1/3 col – 50px – 1/3 col – 50px – 1/3 col – 50px

In the first row I adjusted the 2nd column to have 50px left and right and of course it made the column narrower and not as tall.

In the second row (the plans) they are default and equal height and width but as you see 100px between the middle col and the 1st and last.

Again, it seems that some css applied to the cols to adjust width and left-margin makes the most sense but I can’t get that to work.

Something like this –

#top .av_one_third.small-padding-columns{
margin-left: 1%;
width: 32%;
}

From this post?

https://kriesi.at/support/topic/how-can-i-set-grid-layout-of-images-on-home-page/

Hi Victoria

The First Row
Working – white spacing between all cols and screen border (see mock, 50px)
Not working – center col is narrower and not equal height to the other 2

The Second Row
Working – all 3 cols are equal width and height
Not working – the spacing between the columns is not the same as the outer spacing from columns to screen border (see mock, 50px, then 100px, etc)

Please ignore the fact that the content is different – it’s what will eventually be on the page. Here’s what I need –

Thanks, again!

Hello

Sorry for the long delay in a response!

Israel, the padding effects what is inside each 1/3 column, so that doesn’t resolve the request to make the space between each column – not what’s inside them – equal.

I actually came up with a really good solution that I would like to share, since it’s been bugging me for ages and I like to help others :)

1) Using a grid row, 3 equal columns, set it to have no borders, and give it an id – I used ‘location3up’.

2) Then add a custom class – I used ‘locThumbs’ for each of the 3 cells, and made sure that each cell has 0px padding, aligned top.

3) Then add an image (or whatever content you want) in each of the 3 columns.

Since each cell needs to have the same border or it will change size (see my other replies, above), I set the id to have a left margin of 10px, and then each of the 3 cells have the exact same right margin, also 10px.

You can then change the 10px to 50px or whatever, as long as they are the same for both the id and the class.

#location3up {
border-left: 10px solid #fff;
}

/* this needs to be the same for each cell or the images will not be the same vertical height */

.locThumbs {
border-right: 10px solid #fff !important;
}