Removing space between sections on homepage

hjwaxco
Excursionist
12 0 7

How can I remove the space between section on my homepage? I'm using narrative theme.

url -https://harper-james-wax-co.myshopify.com/

 

Screenshot_20210506-175835_Samsung Internet.jpg

 

 

 

dmwwebartisan
Shopify Partner
6590 1536 2003

@hjwaxco 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px){
.template-index .collection-list{ padding: 10px 0 !important; }
.template-index .featured-collection__heading { margin-top: 22px !important; }
}
@media only screen and (min-width: 750px){
.template-index .collection-list { padding: 10px 0 !important; }
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
hjwaxco
Excursionist
12 0 7

@dmwwebartisan This did work for the space between my intro and 'shop by type' and then the space between 'shop by type' and shop by category' however the space between my last two sections still remains.

dmwwebartisan
Shopify Partner
6590 1536 2003

@hjwaxco 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (min-width: 750px){
.highlight {padding: 60px 0;}
.featured-product__wrapper {padding: 20px 20px !important;}
}

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
hjwaxco
Excursionist
12 0 7

@dmwwebartisan that did not work. Here is the current code I have. Not sure if something needs to be changed-

@media only screen and (max-width: 749px) {
.template-product .product__description { margin-top: 0px !important; }
.template-product .product__content{ margin-bottom: 0px !important; }
}
@media only screen and (max-width: 2000px){
.template-product .product__content { padding-bottom: 0px !important; }
}
@media only screen and (max-width: 749px){
.template-product div#shopify-section-product-template .btn { margin-bottom: 10px; }
}
@media only screen and (max-width: 749px){
.template-index .collection-list{ padding: 0px 0 !important; }
.template-index .featured-collection__heading { margin-top: 5px !important; }
}
@media only screen and (min-width: 750px){
.template-index .collection-list { padding: 10px 0 !important; }
}

 

Also to add (I'm not sure if this matters) But the FAQ section is a "page" I created.

0 Likes

Dear @hjwaxco 

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code.
  • After that in the Assets folder, click to open your theme.scss.liquid file.
  • Go to the very bottom of this file and paste the following code:

 

/* Start */
#shopify-section-1617379505b017af03 .collection-list {padding-bottom: 0 !important;}
@media only screen and (min-width: 750px) {
.template-index  .collection-list { padding: 80px 0 !important; }
}
/* End*/

 

  • Save and check your theme by refreshing it.
Regards,
Task4Store - Get Shopify Small Task Help
Contact Us
: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
1400+ Happy Clients | 25000+ Shopify Small Tasks Done
0 Likes
hjwaxco
Excursionist
12 0 7

@MS-WEB-DESIGNER Unfortunately that did not work. The space is still there.

0 Likes