Solved

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

quiztrail
Explorer
59 0 17

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

 

thumbnail_IMG_8960.jpg

 

Accepted Solution (1)
Moeed
Shopify Partner
3897 985 1231

This is an 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>

Moeed_0-1689667342960.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 4 (4)

SideNode
Shopify Partner
159 38 42

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

If helpful, please Like and Accept this Solution to help others
SHOPIFY APP DEVELOPMENT | BOOK FREE SHOPIFY CONSULTATION
quiztrail
Explorer
59 0 17

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
Shopify Partner
3897 985 1231

This is an 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>

Moeed_0-1689667342960.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
quiztrail
Explorer
59 0 17

Thank you! 🙂