Adjust size of multicolumn boxes in Dawn theme

Store Design
, , , , , ,
1

Hi there,

On mobile view, my column boxes appear very large. They are way too large and the text takes up too much space in the boxes. This is inside the 'Multicolumn" section with swipe disabled.

I would like to reduce the heights of the boxes and text sizes so that they don’t take up so much space on the page.

Does anybody know how to solve this?

357056378_1640330136478582_7618601209365712975_n.jpg
357056378_1640330136478582_7618601209365712975_n.jpg946×2048 122 KB

https://fruitysleep.com/products/fruity-sleep-gummies

1 Like
2

Hello @harry_12345

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

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media screen and (max-width: 500px) {
.multicolumn .multicolumn-list .multicolumn-card.content-container .multicolumn-card__info {
    padding: 0 5px 10px;
}
}

after that --:

Artzen_tech_0-1690348827939.png
Artzen_tech_0-1690348827939.png313×494 40.4 KB

Let me know if need further assistance
Regards,
Artzen Technologies

3

Hi @harry_12345

You can do that by adding CSS code at the bottom of your base.css file

.multicolumn-card__info { padding: 0.5rem !important; }

Screenshot 2023-07-26 at 13.55.16.png
Screenshot 2023-07-26 at 13.55.16.png363×407 43 KB

4

Hello @harry_12345 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.scss.liquid file

Add this following code at the bottom of page

.box {
  height: 100px;
}

.text {
  font-size: 14px;
}

Save and preview

Hope this can help.

Transcy

1 Like