Narrative theme : how to reduce padding between homepage sections

CoffeeRoasters
Tourist
11 0 7

Hello,

 

I can't seem to change the padding between sections on the homepage. There is way too much space.  Please help!

 

My website (temporary link): https://10njwji7ki2w9l72-45395345561.shopifypreview.com

 

Warm regards.

Natztech
Shopify Partner
646 177 433

pleae share which section do you want to  you 

reduce padding

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
CoffeeRoasters
Tourist
11 0 7

Between the slideshow at the top of the page and the image with text overlay, and then the space between the text overlay and the featured collection and the featured collection to the video. The rest of the page is good.

0 Likes
dmwwebartisan
Shopify Partner
5842 1337 1714

@CoffeeRoasters 

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

@media only screen and (min-width: 750px){
.hero--medium .hero__inner, .featured-collection { padding: 10px 0 !important; }
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Natztech
Shopify Partner
646 177 433

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

  @media screen and (min-width: 729px){
       #shopify-section-1618754167c6c9b05f .featured-collection{
           padding:  0 !important ;
       }
        #shopify-section-161875531377831e65 .hero .hero__inner{
          padding:  0 !important ;
       }
       .hero--medium .hero__inner {
        padding:  0 !important ;
      }
   }

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
CoffeeRoasters
Tourist
11 0 7

Thank you for your reply. This works, however the very first text section after the slideshow now does not have enough padding at the top. There should be a little bit of space at the top, between the slideshow and the text. The rest works amazing! 

 

This code seems to have only affected the desktop version and not the mobile version. I would love to have the same padding on the mobile version of the website?

 

Thank you for your great help!

0 Likes