Add margin to a section on mobile only? (Brooklyn Theme)

Solved
wickedbride
Tourist
12 2 11

Good evening! I'm redesigning my home page block by block, and I'm stuck on one section. It's a Custom HTML section (#shopify-section-1627510153775df366), and it displays fine on desktop, but on mobile the border extends to the edges of the screen. I'd like to give it some padding on the left & right on mobile only, but I've tried several different methods and none of them work. Here's the last thing I attempted: 

@media only screen and (max-width: 600px) {
.shopify-section-1627510153775df366 {
margin-right:10px;
margin-left:10px;
}
}

But I'm missing something. Can anyone help? Thanks! 

shot1.jpg.

 

shot2.jpg

 

dmwwebartisan
Shopify Partner
8416 1973 2655

@wickedbride 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
KetanKumar
Shopify Partner
22473 2276 8363

@wickedbride 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
wickedbride
Tourist
12 2 11

www.wickedbride.com - thanks! 

0 Likes
Natztech
Shopify Partner
1891 492 1172

This is an accepted solution.

hello @wickedbride 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

@media screen and (max-width: 729px) {
#shopify-section-1627510153775df366{
	margin :0 12px !important;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
wickedbride
Tourist
12 2 11

@Natztech - that worked perfectly, thanks so much! 

0 Likes