Various adjustments to rows/columns

Support
#1

(image removed)
I have a simple 3 column layout. Each column has a border, and each column includes one image element as well as one headline element.

  • How can I make all columns the same height? Either in set pixels, or inheriting from the tallest one?
  • Can I adjust the margin that is between the columns? All I have found is the switch for “Marginless Columns”, which interestingly solves the first question, but leaves me with no margins at all.
  • How can I add some margin/padding below each column to make the mobile layout more pretty (see image below)

Thanks for all help :slight_smile:

(image removed)

#2

Hi there,

Thanks for writing in.

Same height is only possible with the marginless column, and you probably added the border in the column itself which makes it appear that there is no spacing. How about this, make it marginless column, then add box_column to your column’s class attribute. Then simply add this CSS to your global custom CSS with your border styling and preferred space.

.box_column {
position: relative;
}
.box_column img {
margin: calc(10% + 10px);
}
.box_column:before {
z-index: 0;
position: absolute;
content: "";
display: block;
border: 1px solid #ccc;
top: 10%;
left: 10%;
bottom: 10%;
right: 10%;
}

That should also fix the view on mobile. Don’t forget to add box_column to your column’s class, it’s always and most users forget to follow.

Thanks!

#3

thank you :slight_smile:

#4

You’re welcome.

#5

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