Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Decrease Margins in Hayden Template Products Page


Question

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

9 answers to this question

Recommended Posts

  • 0
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
  • 0
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
  • 0
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
  • 0
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
  • 0
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
  • 0
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
  • 0
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...