How can I reduce extra spaces in my Narrative theme homepage?

Technical Q&A
1

BD74F336-1957-438F-B547-50F6AA5F873B.png
BD74F336-1957-438F-B547-50F6AA5F873B.png1125×2436 195 KB

There is extra spaces that I do not like in my homepage. I believe I’m using narrative theme. Please help. I would like to reduce the space.

2

Hello @AbbyDavid ,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

3

Thank you for your reply!> > The issue is only at my home page.> > https://econenhandmade.com

4

hello @AbbyDavid

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 769px){
#shopify-section-1621804374138485d7 .collection-list{
    padding:  0 !important;
}
#shopify-section-1621804593771d5caa .featured-collection{
    padding:  0 !important;
}
#shopify-section-1621804593771d5caa .featured-collection .card-list.grid{
     margin-bottom: 0px !important; 
}
}
5

Thank you so much for your help. Although this worked on removing unwanted space on the mobile site, it is still present on the laptop and full screen view.

6

Hello please insert this code

@media only screen and (min-width: 768px){
#shopify-section-1621804374138485d7 .collection-list{
    padding:  0 !important;
}
#shopify-section-1621804593771d5caa .featured-collection{
    padding:  0 !important;
}
#shopify-section-1621804593771d5caa .featured-collection .card-list.grid{
     margin-bottom: 0px !important; 
}
}
7

The first code was more helpful so I will use that one instead.

8

hello @AbbyDavid Thank you for Update