A user needs to reduce white space/padding on mobile view without affecting the desktop layout. The gap appears between sections and looks correct on desktop, but needs adjustment for mobile devices.
Solutions Provided:
SideNode suggested adding CSS to target the slideshow section with padding-bottom: 10px !important in the theme.css file
However, this caused the slideshow to overlap with video content on mobile
Moeed provided a media query solution to apply padding changes exclusively to mobile devices (max-width: 768px), added via the theme.liquid file above the </body> tag
Resolution: The mobile-specific media query approach successfully solved the issue, allowing different padding values for mobile without impacting desktop view. The user confirmed satisfaction with the solution.
Hi there,
I want to close the below white gap - it looks good on Desktop. How do I change the padding on Mobile only? If I change it on the below coding then it overlaps the Slideshow/Video sections on Desktop.
#shopify-section-bef4aa3a-c816-4af5-94c4-ef105145a57a {
padding-top:10px;
padding-bottom:110px;
}
Thank you.
Hi @quiztrail
Its SideNode! We will be happy to help you today.
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.
.index-section--slideshow {
padding-bottom: 10px!important;
}
If I was able to assist you, please remember to give it a Like and Mark it as the Solution!
Let me know if need further assistance
Regards,
SideNode
Hi there,
Thank you for your fast response. Is there a way to do this on Mobile only please? As this code is making the Slideshow cover my Video.
Thank you.
Hey @quiztrail
Follow these Steps:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you! 
