How to adjust website width for phone and tablet viewing?

Store Design
,
1

I used this to control the width on my website, but I don’t want it to apply on the phone/tablet. How do I change that?

#MainContent {
margin-left: 20%;
margin-right: 20%;
}

Thanks!

https://illulief.myshopify.com/

2

@illulief
use with media query

@media screen and (min-width: 992px) {
#MainContent {
margin-left: 20%;
margin-right: 20%;
}
}

Thanks

3

@illulief

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (max-width: 749px) {
#MainContent {
margin-left: auto !important;
margin-right: auto !important;
}
}

@media screen and (min-width: 992px) {
#MainContent {
margin-left: 20%;
margin-right: 20%;
}
}

Thanks!

4

@dmwwebartisan Why max and min both ?

5

thanks, this worked like a charm!