REDUCE VERTICAL PADDING BETWEEN HEADER & STORE PRODUCT CATEGORIES

Site URL: http://hassettgoods.com/belts

SITE: http://hassettgoods.com/belts

I'm trying to reduce this huge gap between the heading and the store product categories in 7.1 . I've tried to following but it has no effect:

// REDUCE SECTION HEIGHT //

.page-section {

    min-height: 0 !important;

}

Thanks for your help!

Add to Design > Custom CSS

/* Huge spacing */
section.products.collection-content-wrapper.products-list {
    padding-top: 1px;
}

Also, do you want to fix these?

Site URL – https://hassettgoods.com/

1. (Mobile-Header) Align center vertical burger – logo – cart icons?

2. (Mobile/Tablet-Homepage) Resize banner fullsize?

3. (Tablet-Footer) Make text in 1 or 2 line, same as desktop?

4. (Tablet-Belts) Make these links on 1 line?

5. (Mobile-Belts) remove scrolldown & make these links on 3 or 4 lines?

6. (Mobile-Products) Show breadcrumb on top of product?

7. (Mobile-Products) Image shows 1/2. Do you want to add an arrow slide?

8. (Mobile)The page looks long. Want to add a back to top button?

9. (Tablet-Bespoke) Want to change to 2 or 3 images/row?

Hi Tuan,

Your code worked perfectly! Thank you so much for your help! You are an awesome person, really 🙂

Yes, I would love to be able to fix those your suggestions number 1-7. The Bespoke page is being redesigned into a slide show so suggestions 8-9 will not be needed.

I have another issue under when you click 'Belts' > Choose category (e.g) 'Black leather' and then after clicking the categories the banner disappears? It didn't used to do that? I've attached images to show here.

Your help is so much appreciated!

Thank you

On 4/30/2021 at 2:50 PM, HASSETT said:

Hi Tuan,

Your code worked perfectly! Thank you so much for your help! You are an awesome person, really 🙂

Yes, I would love to be able to fix those your suggestions number 1-7. The Bespoke page is being redesigned into a slide show so suggestions 8-9 will not be needed.

I have another issue under when you click 'Belts' > Choose category (e.g) 'Black leather' and then after clicking the categories the banner disappears? It didn't used to do that? I've attached images to show here.

Your help is so much appreciated!

Thank you

 

Both screenshot look same?

Q1. You can remove space within image

Q2. Add to Design > Custom CSS > Then save & reload your site

/* resize home top banner */
@media screen and (max-width:991px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

Q3. Q4. Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* footer copywright text */
div#block-yui_3_17_2_1_1591249412980_8709 br {
    display: none;
}
/* shop category links */
ul.nested-category-children {
    -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
}
section.products.collection-content-wrapper.products-list {
    padding-left: 6vw;
    padding-right: 6vw;
}
}

Q5-Q9. Next email

Q5. Q6. Add to Design > Custom CSS

/* Mobile - category nav links */
@media screen and (max-width:767px) {
.products.collection-content-wrapper .nested-category-children {
    overflow: hidden;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
/* show breadcrumb */
.ProductItem-nav-breadcrumb {
    display: block !important;
}
}