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

Store Design
1

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
shot1.jpg1170×2532 165 KB

.

shot2.jpg
shot2.jpg1170×2532 183 KB

2 Likes
2

@wickedbride

Please share your store URL.

3

@wickedbride

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

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

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

4

www.wickedbride.com - thanks!

5

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;
}
}
6

@Kinjaldavra - that worked perfectly, thanks so much!