Good day!
How to adjust the spacing between sections mobile view?
Thank you!
Topic summary
A user seeks to reduce or remove spacing between sections specifically in mobile view on their Shopify store (hushpuppies.com.ph).
Solutions Provided:
-
Dan-From-Ryviu suggested adding custom CSS code to the slideshow section via Online Store > Themes > Customize to hide the slideshow text element and adjust spacing.
-
PageFly-Henry offered an alternative approach:
- Navigate to Online Store > Theme > Edit code
- Locate the main.css file
- Add CSS media query targeting mobile devices (max-width: 767px) to hide text overlay elements
- Emphasized CRO principles: each section should fit within one screen without scrolling
- Recommended incorporating product model images and clear CTA buttons for better user experience
Resolution:
The user thanked both contributors for their assistance, indicating the solutions were helpful. The discussion appears resolved with working CSS-based fixes for mobile spacing issues.
Hi @smsigroup
You can do that by adding this code to Custom CSS of the Slideshow section in Online Store > Themes > Customize
.slideshow__text { display: none; }
1 Like
Thank you for the quick reply.
I want to reduce/remove the spacing in mobile view
1 Like
Hi @smsigroup
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file main.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
.text-overlay.text-start.md-down:text-center.has-motion {
display: none !important;
}
}
To ensure optimal viewing experience, it’s crucial that the video banner fits within a single screen without requiring scrolling. This approach aligns with Conversion Rate Optimization (CRO) principles, where each section should be contained within one screen. When users don’t have to scroll or zoom, they can seamlessly engage with the entire video content, enhancing their viewing experience without distractions or interruptions.
Additionally, sections leading to external pages should feature a Call to Action (CTA) button, facilitating smooth navigation for users.
Furthermore, incorporating more images featuring models using your products can enhance visual appeal and provide potential customers with a better understanding of your offerings.
Hope that my solution works for you.
Best regards,
Henry | PageFly
1 Like
Yes, please add this code to the CSS code section of the slideshow section I sent in the image above to remove spacing.
1 Like
Thank you very much for your help.
1 Like
Thank you!
Happy I could help!