Column sizing

Support
#1

Hello, I have a couple questions.

#1 - scroll down to “classes” on this page and there are 3 columns. Right now depending on the content they change size. How do I make them so they all stay the same size as each other?

#2 - in this same section. When you look at it on a mobile phone, the columns sit right on top of each other, without any space inbetween. How can I add the space?

#3 - same with the two columns in the last section. Would like space between the columns when I mobile view.

Thank you!

#2

Hi @TantraFitness,

1.) If you meant height, please inspect the ROW. Then enable MARGINLESS COLUMNS option.

2.) and 3.)Please use GAP element. For example, you have 2 columns, add GAP element as the last element on the first column. Then on Customize Tab > HIDE DURING BREAKPOINTS hide this element on large screen size. For 3 columns add the GAP element on first and second column.

Hope this helps.

#3

Thank you for your response. When I enable marginless columns, they become the same height, but there is no space between the columns anymore. I still want them to look like 3 separate columns, but be the same height.

For 2&3, I tried adding gap, but that didn’t seem to work. The background of each column is set to either white or dark grey and there is a border or shadow on all of the columns. I’m going to keep the last dark grey section as is, but for the 3 columns under Classes, I would like there to be a space between each column in the mobile view. Is there a way to do this?

#4

Hello @TantraFitness,

When you enable the marginless column, the column margin disappears. You can add padding for each column so that the column padding will break them apart.

The top and bottom column padding will also resolve your issue when you are viewing the columns in smaller or mobile screens.

Hope this helps.

#5

I tried that but doesn’t seem to be working. Instead of creating space between the columns, it just increases the white space between the column border and the content. Is there some css or something like that I can add to keep each column separate but the same height?

#6

Hello @TantraFitness,

The padding should be added in each of the columns and NOT in the row settings.
You should have the output like this:

This one is using 10 pixels for the padding.

#7

I was changing the padding for each of the column, not the row. The row you have in the pic is not set to marginless and has no padding set for the columns. However, the one I am referring to is on this page: https://www.tantrafitness.com/banner-test/

If you scroll down you’ll see the 3 columns for pole, dance and aerial. Right now there is space between the columns and they are different heights depending on the screen size. If I set marginless column “on” for the row, then there is no gap between each column. If I change the padding on the column, it only increases the white space between the column border and the content. Please see attached screenshot.

#8

Hi @TantraFitness,

  • To fix the sizing issue, please assign a class equal-height to your section that has those three columns and then add the following code in the Theme Options > CSS: 
@media (min-width: 768px) {
 .equal-height .x-container {
    display: flex;
 }   
}
  • To add margins between the columns in smaller screens, add the following code as well:
@media (max-width: 767px) {
 .equal-height .x-column {
    margin-bottom: 20px;
 }   
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#9

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