Can you change the width of the gap in between each column in a row without it effecting the responsive element?

[core365]

Hi, I’ve got a row with 4 columns and the width of the gap in between each column is too big. I’ve tried to reduce this myself with CSS, but when I view it on a mobile, the responsive element doesn’t work. I’ve also tried to use the ‘Marginless Columns’ option, but then it doesn’t allow me to add in a margin to either side of the column with CSS so I can add the space I want back in!

Here’s a screen grab for your ref:

I’ll put the URL in a secure note as it’s being built on a temp link.

Thanks!

[mldarshana]

Hi There @core365

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

@media (min-width: 767px) {
  .e1874-46.x-section .x-column {
    margin-right: 1%;
  }
}

I see that you have assigned a CSS class called margin-bottom into your Columns, Similarly, you can also assign a CSS class into your section and replace this part .e1874-46.x-section with that my-custom-section and then you can use margin-bottom class to target your Columns.

For example:

@media (min-width: 767px) {
  my-custom-section .margin-bottom {
    margin-right: 1%;
  }
}

Thanks!

[core365]

Hi, I’ve added in the CSS, but nothing has changed on it. I’ve set the row Marginless Columns to ‘On’ and that didn’t make a difference either.

Cheers

[thai]

Hi @core365,

There is an error in the custom CSS. Please update the custom CSS to this:

@media (min-width: 767px) {
  .my-custom-section .margin-bottom {
    margin-right: 1%;
  }
}

Hope it helps

[core365]

Hi, I’ve done that, but the widths of the columns haven’t adapted to fill the width of the screen - the margin has reduced between the 4 columns but there’s now a bigger gap to the right of the 4th column because the widths of the columns haven’t increased to fill the space!

Cheers

[christian]

Hey @core365,

Sorry for the lack of info. If you change the margin, you also need to change the width of the columns in order for them to look balanced in the page. Please update the code to this:

@media (min-width: 767px) {
  .small-margins .margin-bottom {
    margin-right: 1%;
  }
 .small-margins .x-column.x-1-4 {
    width: 24.25%;
 }
}

If you change to 3 columns, you need to change x-1-4 to x-1-3.

Hope that helps.

[core365]

Ah, brilliant, thanks! That’s spot on!

Thanks for your help!

[Prasant]

You are most welcome.