Adjust section columns

[LindStuart]

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!

[BSSCommerce-B2B · Accepted solution]

@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 </body> tag

<style>
#shopify-section-template--23179525914910__16541619272fee0e4e div.card {
  transform: scale(0.8)
}
@media only screen and (min-width: 1050px) {
#shopify-section-template--23179525914910__165597098555c514a4 .grid-4 {
  --visible-cols: 6
}
}
</style>

 Result:

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

Best Regards 🙂

[BSSCommerce-B2B · Accepted solution]

@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 </body> tag

<style>
#shopify-section-template--23179525914910__16541619272fee0e4e div.card {
  transform: scale(0.8)
}
@media only screen and (min-width: 1050px) {
#shopify-section-template--23179525914910__165597098555c514a4 .grid-4 {
  --visible-cols: 6
}
}
</style>

 Result:

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

Best Regards 🙂

[LindStuart]

thank you so much!

[Made4uo-Ribe · Accepted solution]

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:

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

[LindStuart]

thank you so much!!

[Made4uo-Ribe]

Welcome! Would you mind hitting 'like' as well? Thanks!