Jump to content

Decrease Margins in Hayden Template Products Page

Recommended Posts

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:

1445601305_ScreenShot2021-04-20at10_02_58AM.thumb.png.f025381f946df15f23ae23ba800a3b48.png

Thank you as always for your help.

Best,

Grant

 

@tuanphan @bangank36 @creedon

Link to comment
  • Replies 9
  • Views 722
  • Created
  • Last Reply
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:

1445601305_ScreenShot2021-04-20at10_02_58AM.thumb.png.f025381f946df15f23ae23ba800a3b48.png

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;
    }
}

Link to comment
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

1975924371_ScreenShot2021-04-20at4_11_25PM.thumb.png.e45d638f2fb07cc7a87a2dc547cb97a5.png

Link to comment
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

1975924371_ScreenShot2021-04-20at4_11_25PM.thumb.png.e45d638f2fb07cc7a87a2dc547cb97a5.png

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

Link to comment
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;
        }
    }
}

Link to comment
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.

Link to comment
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;
    }
}

Link to comment
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! 🙂

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.