Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Reduce Padding on header below collection title - BLOCKSHOP

Reduce Padding on header below collection title - BLOCKSHOP

curvybeach
Excursionist
14 0 7

Hi! Can someone help me reduce this white space above and below the collection header?

IMG_3253.jpg

(Specifically on Mobile view)

 

My website is:

 

https://www.curvybeach.com/

 

And photo attached. Much much thanks! 

Replies 3 (3)

BSSCommerce-HDL
Shopify Partner
2305 834 908

Hi @curvybeach

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside tag head. You need create style tags. After you'll insert my code inside it

BSSCommerceHDL_0-1717638365459.png

@media only screen and (max-width: 767px) {
    #collection-root #gf-grid {
        padding-top: 0 !important;
    }
    #collection-root .gf-actions {
        margin-bottom: 0 !important;
    }
}

Here is result: 

BSSCommerceHDL_1-1717638394173.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

PageFly-Noah
Shopify Partner
1317 233 277

This is Noah from PageFly - Shopify Page Builder App

 

Hi @curvybeach  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

<style>
.template--collection .collection--header--description{
   padding-bottom: 0px !important;
}
.template--collection .collection--body--root #gf-controls-container{
height: 55px !important;
}

</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

devcoders
Shopify Partner
546 78 141

Hi @curvybeach 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/theme--critical.css and paste the code below at the bottom of the file.

 

 

@media screen and (max-width: 749px){
.collection--header--description {
padding: 15px;
}
div#gf-grid {
padding-top: 10px!important;
}
}

 

devcoders_0-1717640380182.png

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!