Make 3 col multicolumn on desktop be 2 columns on mobile

Store Design
1

Hi there,

I’d like 3 column “multi-column” element on desktop to be 2 columns on mobile.

Also, the multicolumn seems to have a wrapper that wraps each column in the multicolumn and I’d like to decrease by about 40% the top, left, and right spacing of the wrapper that pads each column. I’m assuming doing so will also bring each column closer together, which is something I would like.

I tried adding the below code to base.css, but it makes the third column in the multicolumn on mobile be full-width instead of about half-width like the first two columns.

@media only screen and (max-width: 749px){
li.multicolumn-list__item.grid__item {
width: 45%;
}
}

I’m on Dawn 2.4.

Any help is greatly appreciated!
Thank you!

2

Hello,

Please share the url where the problem is.

And some reference images of what you want to achive.

3

Hi Dannyelo,

Thank you for replying.

You can see the problem on a mobile device at https://campingchics.com

Scroll down to the collection just below the heading “Spice Up Your Camping Style With Our Most Popular Collections!”

There you’ll see the effect of the css I’ve tried… the first two columns of the multi-column (Premium Hoodies…, Must Have Essentials) are in one row, but the third column of the multi-column is full-width in a single column row. Instead of that third column being a full-width single column, I’d like it to be a double column row like the row above it.

Lastly, I’d like to reduce padding in the column wrapper by 50% on the left, right, top of each row so the images/text of each column are closer to the edge of the light gray wrapper.

Here’s a 90-second video showing what I’m attempting to do.
https://www.loom.com/share/dffbbf2e5a314ef8aad69c6066670764?sid=0d08b759-2848-4f07-9057-ffb525190279

Pls lmk if you need more info.
Thank you!

4

Hello!

I reply to you with a loom video. Please let me know what you think and I will help you achieve what you want.

Best

5

Ok cool, pls reply with the loom.

6

Hey, I already reply there.

7

Just saw it. Thank you. I also just replied to your loom.

8

Hey TJ,

Here is what to do if you want to have the white space.

Step 1. Change grid system.

File: /assets/section-multicolumn.css - Line: 146

@media screen and (max-width: 749px) {
  .multicolumn-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    /* Add this new styles */
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Step 2. Set width to 100%.

File: /assets/base.css - Line: 2343

@media only screen and (max-width: 749px) {
  li.multicolumn-list__item.grid__item {
    /* Change this value to 100%, actual value is 45% */
    width: 100%;
  }
}

Step 3. Decrease image padding.

File: /assets/section-multicolumn.css - Line: 11

.multicolumn-card-spacing {
  padding-top: 2.5rem;
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  /* Add this new declarations */
  margin: 0;
  padding: 1rem;
}

Step 4. Decrease text padding.

File: /assets/section-multicolumn.css - Line: 206

.multicolumn-card__info {
  /* Change value to 1rem */
  padding: 1rem;
}

Let me know if you could achieve it.

Best,