Shopify themes, liquid, logos, and UX
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!
.
Solved! Go to the solution
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;
}
}
Please share your store URL.
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;
}
}
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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024