Reduce gap between sections

Store Design
1

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
IMG_3091.jpeg1290×2234 272 KB

2

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 tag

RESULT:

Moeed_0-1719473468889.png
Moeed_0-1719473468889.png376×670 173 KB

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

Best Regards,
Moeed

3

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 on theme.liquid

@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; } }

techlyser_web_0-1719473846066.png
techlyser_web_0-1719473846066.png314×302 75 KB

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

4

Hi @DULHANJEWELS m,

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
BSSCommerceHDL_0-1719473606199.png1919×873 121 KB

.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
BSSCommerceHDL_1-1719473672998.png1920×407 269 KB

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 :heart_eyes:

5

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

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

6

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

and the result will be

15.png
15.png425×832 342 KB

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