How can I achieve a grid layout using CSS?

Solved

How can I achieve a grid layout using CSS?

designbyjrs
Shopify Partner
4 0 0

Hello!

 

I'm looking to achieve the grid layout (seen below). Unfortunately, the theme I'm using does not have a section for this, so I've set it up as a "logo list" section and am hoping to edit it using CSS.

 

Also! If you have any idea how to change the color of the curved text and float it between sections, that'd be great!

 

Screen Shot 2024-01-22 at 2.14.41 PM.png

 

Website link: https://eqnk4jk5n8zgl3d5-60502671460.shopifypreview.com

 

Thank you!!

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

Hey @designbyjrs,

Please use the following CSS to create the grid

 

ul#icon-row-template--16313034702948__logo_list_9FPrwJ {
    display: grid;
    grid-template-columns: repeat(3, auto);
    row-gap: 40px;
    margin-left: 10%;
    margin-right: 10%;
}

@media only screen and (max-width: 768px) {
    ul#icon-row-template--16313034702948__logo_list_9FPrwJ {
        grid-template-columns: repeat(2, auto);
        row-gap: 20px;
        margin-left: 5%;
        margin-right: 5%;
    }
}

 

 

As for the text color, please use the following CSS, replace "blue" with the colour you want.

 

tspan {
    fill: blue !important;
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 2 (2)

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

Hey @designbyjrs,

Please use the following CSS to create the grid

 

ul#icon-row-template--16313034702948__logo_list_9FPrwJ {
    display: grid;
    grid-template-columns: repeat(3, auto);
    row-gap: 40px;
    margin-left: 10%;
    margin-right: 10%;
}

@media only screen and (max-width: 768px) {
    ul#icon-row-template--16313034702948__logo_list_9FPrwJ {
        grid-template-columns: repeat(2, auto);
        row-gap: 20px;
        margin-left: 5%;
        margin-right: 5%;
    }
}

 

 

As for the text color, please use the following CSS, replace "blue" with the colour you want.

 

tspan {
    fill: blue !important;
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
designbyjrs
Shopify Partner
4 0 0

Amazing, thank you!