Shopify themes, liquid, logos, and UX
Hi Friends,
I am currently using the Showcase theme. Can someone please advise how to reduce the white space between the sections? For example, the gap between Slideshow and Collection list section. If it needs to be adjusted for each section, I would also like to do the same after the featured items and collection section, and before/after the video and between footer and above footer sections and between products on collection pages. Here is my store homepage link. My Apparels Bridal Studio
Thanks in advance.
Note: I marked on screenshot where I want to reduce space on my homepage.
Solved! Go to the solution
This is an accepted solution.
Hello @myapparelsuk!
Hope you are doing well.
Please add the below CSS in your styles.css theme file at the bottom to remove the space:
@media (min-width: 768px){
.section-spacing {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.section-footer .section-footer__row-lower {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.section-footer .section-footer__row--blocks {
padding-top: 20px !important;
}
}
Hope this will help you out.
iCart Cart Drawer Cart Upsell App
This is an accepted solution.
Hello @myapparelsuk!
To remove the padding in mobile add the below code please:
@media (max-width: 768px){
.section-spacing {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.section-footer .section-footer__row-lower {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.section-footer .section-footer__row--blocks {
padding-top: 20px !important;
}
}
iCart Cart Drawer Cart Upsell App
Hi there @myapparelsuk!
Thanks for reaching out here in the Shopify Community to share your query.
It looks like you're selling bridal fashion, is this a new business or are you moving an existing venture online?
How you can get support for a given theme would depend on who has created that theme.
In this case, as you're using the Showcase theme this is developed and supported by Clean Canvas.
You can contact your theme's developers using their contact form here, and you can also browse their support articles here.
That said, we do not recommend that merchants remove whitespace from their store's themes as a general rule.
Whitespace allows for greater readability and accessibility for your customers, and removing it would decrease them.
Check out this external article for some more info on the importance of whitespace in design.
Don | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
@Don Yes you are right, White space is important but as you can see in my case gap is too much and looks ugly. Thats why I want to reduce. After slider there is too much gap. Also after every section.
Hi again @myapparelsuk!
Thanks for getting back to me here with that info.
I can see that you're already getting some help here from the Community, that's really great to see!
Should you require further assistance with editing your third-party theme beyond the help you're getting here, you can contact your theme's developers or consider hiring an Expert developer as outlined above.
Let us know if there's anything else we can help out with for your business on the Shopify side of things at any stage!
Don | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
Please add the following CSS code to your assets/styles.css bottom of the file.
@media (max-width: 767px){
.section-spacing {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media (min-width: 768px){
.section-spacing {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
Thanks!
This is an accepted solution.
Hello @myapparelsuk!
Hope you are doing well.
Please add the below CSS in your styles.css theme file at the bottom to remove the space:
@media (min-width: 768px){
.section-spacing {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.section-footer .section-footer__row-lower {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.section-footer .section-footer__row--blocks {
padding-top: 20px !important;
}
}
Hope this will help you out.
iCart Cart Drawer Cart Upsell App
@iCart_App After pasting your codes on desktop white space is reduced but on mobile version showing the same.
This is an accepted solution.
Hello @myapparelsuk!
To remove the padding in mobile add the below code please:
@media (max-width: 768px){
.section-spacing {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.section-footer .section-footer__row-lower {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.section-footer .section-footer__row--blocks {
padding-top: 20px !important;
}
}
iCart Cart Drawer Cart Upsell App
Thank You @iCart_App Now both mobile and Desktop space is reduced.
I need to do this as well in the Dawn theme... remove space between sections.
I tried this code but it didn't work.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024