Need Help in increasing the number of rows in multicolumn from 2 to 3 in mobile

[pskbecks]

Hi Good folks of Shopify,

Can you please help me in setting all these three images (part of a multicolumn) in the same row on mobile. I have attached a screenshot for you to see through.

Also I have another multicolumn which has 2 images, I don’t want that to change, only this one

I am using the Dawn theme.

The website url is

https://my-gurgaon-store.myshopify.com

[shubhamSharma]

hello @pskbecks

step 01:

1. Go to your Store > Theme > click to edit code.
2. find this file "base.css " and open.

step 02:

1. Paste the code at the end of the file.

@media only screen and (max-width:767px){
  ul.multicolumn-list {
    flex-wrap: nowrap !important;
  }
}

this idea helps you

[WebDeskSolution]

Hello @pskbecks

Once you Log in to the Admin, then process the following steps:

Step 1: Go to Dashboard ->Online Store ->Theme-> Action->Edit code->

Step 2: Search the file base.css

Step 3: Paste the below CSS at bottom of the file → Save

@media only screen and (max-width:767px){
body .multicolumn slider-component ul.multicolumn-list
{
	flex-wrap: nowrap !important;
}
}

Output:

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

[pskbecks]

Hi @WebDeskSolution @shubhamSharma

Thank you for providing a solution to this. However it did not work. The image came out be looking like thelike this.

[WebDeskSolution]

Hello @pskbecks

Try the following code. It may solve your problem

@media only screen and (max-width:767px){
body .multicolumn slider-component li.multicolumn-list__item.grid__item
{
	width: calc(33% - 10px) !important;
}
}