How can I adjust mobile-only padding without affecting desktop view?

[quiztrail]

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.

www.quiztrail.co.uk

[SideNode]

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

[quiztrail]

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. 

[Moeed · Accepted solution]

Hey @quiztrail 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
@media only screen and (max-width: 480px) {
.index-section--slideshow {
    padding-bottom: 10px !important;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[quiztrail]

Thank you! 🙂