How to adjust the spacing between sections mobile view?

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.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.

Good day!

How to adjust the spacing between sections mobile view?

Thank you!

https://hushpuppies.com.ph/

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

Hi @Dan-From-Ryviu

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

@Dan-From-Ryviu

Thank you very much for your help.

1 Like

@PageFly-Henry

Thank you!

Happy I could help!