Reduce gap between sections

Solved

Reduce gap between sections

DULHANJEWELS
Tourist
11 0 2

 Hey I want to reduce the gap between accouncement bar and circles menu also the gap between the circle menu and slider, can someone pls provide me codes to reduce the gap on both mobile and desktop ?

 


my site link is - Dulhanjewels.com

IMG_3091.jpeg

Accepted Solution (1)

Moeed
Shopify Partner
4320 1110 1361

This is an accepted solution.

Hey @DULHANJEWELS 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.sf-circle-menu-header {
    margin: 5px !important;
}
.sf-circle-menu-grid {
    padding-bottom: 0 !important;
}
</style>

RESULT:

Moeed_0-1719473468889.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
4320 1110 1361

This is an accepted solution.

Hey @DULHANJEWELS 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.sf-circle-menu-header {
    margin: 5px !important;
}
.sf-circle-menu-grid {
    padding-bottom: 0 !important;
}
</style>

RESULT:

Moeed_0-1719473468889.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

techlyser_web
Shopify Partner
1779 330 357

Hello @DULHANJEWELS 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
.sf_template--22895480996146__animatedinsta_jQPjTi .sf-circle-menu-grid {
padding-bottom: unset !important;
}
  .sf_template--22895480996146__animatedinsta_jQPjTi .sf-circle-menu-header {
      margin: unset !important;
  }

}
</style>

techlyser_web_0-1719473846066.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

BSSCommerce-HDL
Shopify Partner
1026 345 412

Hi @DULHANJEWELSm, 

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

Step 2: Search file theme.liquid

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

BSSCommerceHDL_0-1719473606199.png

 

.sf-circle-menu-header {
    margin: 0px 0px 10px 0px !important;
}

.sf-circle-menu-grid {
    padding-bottom: 5px !important;
}

 

Here is result: 

BSSCommerceHDL_1-1719473672998.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 😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

PageFly-Noah
Shopify Partner
1317 233 268

This is Noah from PageFly - Shopify Page Builder App

 

Hi @DULHANJEWELS  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>

@media screen and (max-width: 767px){
.sf-circle-menu-grid{
  padding-bottom: 0px !important;
}
.sf-circle-menu{
  margin-top: -20px !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.

pwcsangeeta
Shopify Partner
41 4 8

Hello @DULHANJEWELS 

Go to online store ---------> themes --------------> actions ------> edit code-------> Base.css
add this code  bottom the file.

 

 

section.sf-circle-menu {
    padding: 20px 0;
}

 

 

ss.png

Thanks

Rahul_dhiman
Shopify Partner
217 40 39

Hello @DULHANJEWELS 
Go to online store ---------> themes --------------> actions ------> edit code-------> theme.liquid
and add this code in the bottom of the file above </body> tag

<style>
.sf-circle-menu-header {
margin: 10px !important;
}
.sf-circle-menu-grid {
padding-bottom: 0 !important;
}
</style>

and the result will be
15.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here