Change number of columns in a row for "text columns with images" on desktop and mobile

Store Design
1

Hi,

I hope someone can help me. I am trying to change the number of columns that show on one row for “text columns with images” on both desktop and mobile. Currently, on the desktop, the section will show three columns in a row but if I add a fourth it automatically creates two rows of two columns. I would like one row of four columns to be displayed on my desktop. On mobile, it shows four rows of one column. I would like the mobile view to have two rows with two columns each. I am using the “Impulse” theme. My store is maxinemakes.com and is password protected, the password is MM2020. The page I’m trying to use this section on is the “about” page.

Here is a photo of what it currently looks like on the desktop

Screen Shot 2022-07-10 at 8.52.59 AM.png
Screen Shot 2022-07-10 at 8.52.59 AM.png2864×1166 280 KB

2

Hi,

The “text columns with images” section is using global setting classes (grid, grid–uniform & grid–flush-bottom). If you don’t mind all other sections affect the same results, you may add the code below in theme.css file.

.grid.grid--uniform.grid--flush-bottom {
  display: flex;
  justify-content: space-evenly;
}

@media only screen and (max-width: 768px) {
.grid.grid--uniform.grid--flush-bottom {
    display: flex;
    flex-direction: column;
  }
}

If you want to make the change only on About page, you will need to duplicate the “text columns with images” section and add a class name (such as Few_Fun_Facts) in to the section (as below).

And then add the below code in to the theme.css file.

.Few_Fun_Facts {
  display: flex;
  justify-content: space-evenly;
}

@media only screen and (max-width: 768px) {
.Few_Fun_Facts {
    display: flex;
    flex-direction: column;
  }
}

Hope it helps.

If you need any further assistance, please send me a private message.

3

@MaxineMakes

can you try this code before add this code check your theme setting may be allow this option

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 769px) {
.grid__item.medium-up--one-half.text-center.aos-init.aos-animate {
    width: 25%;
    clear: none;
}
}