Change the space above and below "View All" button in Debut theme

nostalgiaLTD
Tourist
6 0 4

I am trying to change the space between the "View All" button on my homepage. I would not like there to be so much space between the bottom of the collection above the button, and the collection below the button. It seems a bit large (especially on mobile). I dont have any options on my "Customize Theme" editor to adjust button radius, height, etc. Only color and font style. Any help is much appreciated! (www.nstlga.la)

Screenshot 2024-04-14 175215.pngScreenshot 2024-04-14 175327.png

Replies 3 (3)

PageFly-Amelia
Navigator
325 97 139

Hello @nostalgiaLTD 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

 

/* You can change the value of 20px and 10px to the value you want */
.hr--invisible {
   margin-top: 20px !important;
   margin-bottom: 10px !important;
}

 

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | 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.


Optimize your store’s mobile shopping experience with the Blum theme.

PageFly-Noah
Astronaut
1119 201 220

 

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to change space content and button and set style button:

Step 1: Online Stores > Themes > Edit code

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

 

<style>
.shopify-section .hr--invisible{
   margin: 30px 0px !important; //change space content and button
}
//you can change param different
.shopify-section .text-center .btn{ 
    background: red !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    border-radius: 5px !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.

diego_ezfy
Shopify Partner
2967 571 899

@nostalgiaLTD@nostalgiaLTD, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.hr--invisible{
margin-top: 10px !important;
margin-bottom: 10px !important;
}


You can change the 10px value as per your wish.

If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego