Multi column section

Store Design
, , , , , , ,
1

Harshal54_1-1715179727825.png
Harshal54_1-1715179727825.png1525×107 5.96 KB

I want my option to look like the image below.

Harshal54_0-1715179641645.png

Store url : Baan Urban | Clothing & Apparel | Lifestyle & Homeware – Baan Urban | Clothing & Apparel | Lifestyle & Homeware (2819f6-e4.myshopify.com)

2

Hi @Harshal54
Its Artzen Technologies! We will be happy to help you today.

You can try the CSS which I have mentioned below to make this section more appealing and good in design.

Artzen_tech_0-1715242312173.png
Artzen_tech_0-1715242312173.png1247×175 99.5 KB

  1. Go to your Online Store
  2. Edit Code
  3. Find theme.liquid file or CSS File
  4. Add the following CSS at the bottom of the file above or in your CSS file
.multicolumn-card .multicolumn-card__info {
    padding: 10px 30px!important;
}
.multicolumn-card__info .link {
    margin: 0px!important;
}

If my solution helped you, then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies

1 Like
3

Hi

Thank you; it worked fine. but can you please increase the gap between the two columns?

Harshal54_0-1715247703931.png

like this in the below picture.

Harshal54_1-1715247744947.png

4

@Harshal54

Yeah sure,
Here is the CSS for same.

ul.multicolumn-list {
    gap: 30px;
}
li.multicolumn-list__item {
    width: 30% !important;
}

Artzen_tech_0-1715249983978.png
Artzen_tech_0-1715249983978.png1331×218 118 KB

If my solution helped you, then please mark it as accepted.

Let me know if need further assistance
Regards,
Artzen Technologies

1 Like
5

Hi, this one is also working, and I loved it, but can you provide me with a CSS code that I can use in custom CSS because it is changing the whole page setting and I want it focused on those three columns?