Decrease Margins in Hayden Template Products Page

Site URL: https://www.houseofflow.co/shop

Hi Everyone:

I am having a terrible time with the products page on my Hayden template.  I would love any help with the CSS I need to extend the content (products), while decreasing the margins considerably on the page.  I also am trying to figure out how to add a png file for my heading as it's been created in Photoshop and too hard to customize with just text and css.

See picture below for what I'm trying to do:

Thank you as always for your help.

Best,

Grant

@tuanphan @bangank36 @creedon

5 hours ago, grantalanhenry said:

Site URL: https://www.houseofflow.co/shop

Hi Everyone:

I am having a terrible time with the products page on my Hayden template.  I would love any help with the CSS I need to extend the content (products), while decreasing the margins considerably on the page.  I also am trying to figure out how to add a png file for my heading as it's been created in Photoshop and too hard to customize with just text and css.

See picture below for what I'm trying to do:

Thank you as always for your help.

Best,

Grant

 

@tuanphan @bangank36 @creedon

Hi. Please try below code for the spacing. copy/paste code into CSS editor
#collection-5fac98f2ff73a225b2353077 {
    #page {
        width: 1400px !important;
    }
    #productList {
        max-width: 1400px !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
}

5 minutes ago, Agha_Waqas said:

Hi. Please try below code for the spacing. copy/paste code into CSS editor
#collection-5fac98f2ff73a225b2353077 {
    #page {
        width: 1400px !important;
    }
    #productList {
        max-width: 1400px !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
}

Thanks so much for the response, but that unfortunately didn't work.  It just made the products off-center (see below).  I am trying to decrease the padding on both sides, so I can hopefully fit 4 products in a row as opposed to three...

Thanks again for your help, though. If you have any other ideas then please let me know.

Best,

Grant

5 minutes ago, grantalanhenry said:

Thanks so much for the response, but that unfortunately didn't work.  It just made the products off-center (see below).  I am trying to decrease the padding on both sides, so I can hopefully fit 4 products in a row as opposed to three...

Thanks again for your help, though. If you have any other ideas then please let me know.

Best,

Grant

Can you please apply my code again so i will see it.

2 minutes ago, Agha_Waqas said:

Can you please apply my code again so i will see it.

Sure, it's on my site now:

https://www.houseofflow.co/shop

11 minutes ago, grantalanhenry said:

Sure, it's on my site now:

https://www.houseofflow.co/shop

add below code and see

#collection-5fac98f2ff73a225b2353077 {
    #page {
        max-width: 100% !important;
    }
    #productList {
        max-width: 100% !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-column-gap: 30px;
        grid-row-gap: 30px;
        width: 100% !important;

        .product {
            margin-left: 0 !important;
            margin-top: 0 !important;
            width: 100% !important;
        }
    }

    @media (max-width: 1024px){

        #productList {
             grid-template-columns: 1fr 1fr !important;
        }
    }

    @media (max-width: 620px){
        #productList {
             grid-template-columns: 1fr !important;
        }
    }
}

4 minutes ago, Agha_Waqas said:

add below code and see

#collection-5fac98f2ff73a225b2353077 {
    #page {
        max-width: 100% !important;
    }
    #productList {
        max-width: 100% !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-column-gap: 30px;
        grid-row-gap: 30px;
        width: 100% !important;

        .product {
            margin-left: 0 !important;
            margin-top: 0 !important;
            width: 100% !important;
        }
    }

    @media (max-width: 1024px){

        #productList {
             grid-template-columns: 1fr 1fr !important;
        }
    }

    @media (max-width: 620px){
        #productList {
             grid-template-columns: 1fr !important;
        }
    }
}

WONDERFUL! Thank you so much.  I'm going to play around with it, but that's exactly what I needed. 

Do you know how to put the png of the logo I want above the universal filter instead of the text heading  (The Library) that's currently there?

Thank you, thank you.

8 minutes ago, grantalanhenry said:

WONDERFUL! Thank you so much.  I'm going to play around with it, but that's exactly what I needed. 

Do you know how to put the png of the logo I want above the universal filter instead of the text heading  (The Library) that's currently there?

Thank you, thank you.

upload the image on CSS editor and update the background image link in my code. and adjust the width and height accordingly.
#collection-5fac98f2ff73a225b2353077 {
     #content:before {
        font-size: 0;
        background: url(' // add image url ') no-repeat;
        background-size: contain;
        width: 100px;
        height: 100px;
        margin: 0 auto 50px auto;
    }
}

Just now, Agha_Waqas said:

upload the image on CSS editor and update the background image link in my code. and adjust the width and height accordingly.
#collection-5fac98f2ff73a225b2353077 {
     #content:before {
        font-size: 0;
        background: url(' // add image url ') no-repeat;
        background-size: contain;
        width: 100px;
        height: 100px;
        margin: 0 auto 50px auto;
    }
}

Super. Thank you so much. I can't tell you how long I was trying to figure this out on my own with a very basic knowledge of CSS! 🙂

4 minutes ago, grantalanhenry said:

Super. Thank you so much. I can't tell you how long I was trying to figure this out on my own with a very basic knowledge of CSS! 🙂

Your welcome.