Shopify themes, liquid, logos, and UX
This is my Shopify developer store created by the Debutify theme.
Link - https://uniquestoreall.myshopify.com/
Psw - 1234
There are two "Image with text sections" before the footer section. I want to reduce the white space between those two sections. But unable to do it. If anyone does it for me by inspecting elements, I will be grateful to him.
Make sure perfect for mobile devices.
Solved! Go to the solution
This is an accepted solution.
@Mukta_92 - please add this css to the very end of your theme.scss.css file, I will reduce spacing on homepage, change no. 20 as per your need
@media screen and (min-width: 769.1px){
.box {padding-top: 20px; padding-bottom: 20px;}
}
This is an accepted solution.
Hi @Mukta_92 , go to theme.scss.css and add the following code :
.box {
padding-top: 20px !important;
padding-bottom: 60px;
}
This is an accepted solution.
@Mukta_92 - please add this css to the very end of your theme.scss.css file, I will reduce spacing on homepage, change no. 20 as per your need
@media screen and (min-width: 769.1px){
.box {padding-top: 20px; padding-bottom: 20px;}
}
This is an accepted solution.
Hi @Mukta_92 , go to theme.scss.css and add the following code :
.box {
padding-top: 20px !important;
padding-bottom: 60px;
}
Hi @Mukta_92 ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file -> Save
<style>
.box{
padding:10px 0 !important
}
</style>
Hope my solution works perfectly for you!
Best regards,
Oliver | 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.
Hello @Mukta_92 ,
I understand you are looking to reduce the space between two section(Image with text sections)
Please follow the below mentioned steps to implement this change-:
1. Go to Online Store -> Themes-> click on 3 dots -> Edit code.
2. Search for the theme.liquid file and open it.
3. Now paste the below mentioned code at the bottom of this file before </body> tag
<style>
.box {
padding: 15px;
}
</style>
4. Save changes.
Output will look like this -: https://prnt.sc/b98HXsvyP1Hn
Please feel free to change the padding pixel size as per your requirements.
Kindly let me know if you need any assistance.
I look forward to your response.
Hello I can't seem to remove this space o n my home page with the all the answers from this thread ... 😕
@cptstoa - please share this page link
Hi, thanks i already found the solution 😉
can you share how you solved it? I'm dealing with the same issue.
insert this in your them.liquid
}
.section + .section {
margin: 0 !important;
}
Tnx, but it didn't work
I think I'm having a different problem with the white space below the slideshow.
Having the same issue on my Dawn theme but this did not change the margins at all, could you please help? https://community.shopify.com/c/shopify-design/remove-white-space-margin-in-featured-collection-sect...
If you are still looking for how to do this, there is now an easier way. Follow these steps:
1. Select the gear on the left side
2. Select Layout
3. Select Space between template sections
I LOVE YOU ... thank you! Have been struggling with this all day haha
Darn, I sure wish this option was in the theme we're using (Symmetry). I want to make this change also and I'd really rather not edit the .css file.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024