Adjust section columns

Store Design
1

Hi there -

I’m looking for assistance with two minor homepage design changes that I can’t figure out!

Site: https://market.foodsocial.io/

  1. In the “Brands we love” section, how do I shrink it down so the icons don’t take up so much vertical space? Especially on desktop. I want them to still be 4 across on desktop and still 100% visible (not cut off), but not be so massive. I tried to set a max height but it wasn’t working for me.

  2. Trying to set the “Shop by dietary preference” section to be 6 columns across on desktop instead of 4. Any advice?

Thank you so much in advance!

1 Like
2

@LindStuart ,
Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before tag

Result:

BSSCommerceB2B_0-1727790281061.png
BSSCommerceB2B_0-1727790281061.png1869×853 141 KB

BSSCommerceB2B_1-1727790288685.png
BSSCommerceB2B_1-1727790288685.png1889×896 192 KB

If it helps you, please like and mark it as the solution.

Best Regards :slightly_smiling_face:

1 Like
3

Hi @LindStuart

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (min-width: 989px) {
    div#shopify-section-template--23179525914910__16541619272fee0e4e .grid-4 {
        --visible-cols: 4;
    }
}

@media only screen and (min-width: 999px) {
    div#shopify-section-template--23179525914910__165597098555c514a4 .grid-4 {
        --visible-cols: 6;
    }
}

And Save.

Result:

Made4uoRibe_2-1727791029367.png
Made4uoRibe_2-1727791029367.png1869×732 153 KB

Made4uoRibe_3-1727791040028.png
Made4uoRibe_3-1727791040028.png1871×570 104 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

thank you so much!

5

thank you so much!!

6

Welcome! Would you mind hitting ‘like’ as well? Thanks!