Change Margin Size On Computer And Mobile.

Highlighted
New Member
15 0 0

Hi there,

 

I am currently experimenting with margins in my Shopify store, i have created some code in the theme.scss.liquid folder which works perfectly for editing the margin space on certain elements:

div #shopify-section... {
margin-top: -50px;
margin-bottom: -100px;
margin-left: 150px;
margin-right: 150px;

^The code looks great on computer but it when i switch to mobile view the margins are too big. Is their anyway to have different margin sizes on computer and mobile view.

Thanks

0 Likes
Highlighted
New Member
2 0 0

What you are needing are media queries! You can duplicate that code you already have, wrap it in in a media query and then tinker with the pixels you are using for the margins. https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of... here is an article with a full in depth explanation if you need more guidance!

@media (max-width: 500px) {
div #shopify-section {
margin-top: -20px;
margin-bottom: -50px;
}
}
0 Likes