Separate desktop and mobile css HELP NEEDED

Store Design
1

I’m using this code below to add a padding on my homepage only so that my homepage header doesn’t cover my gallery images:

@media only screen and (min-width: 750px) {
.template-index .main-content {
padding-top: 165px;
}
}

However, it does not have the same affect on my mobile device. When viewing on my mobile device there is a white space below the banner and above the photos. To display properly on mobile devices the code needs to be:

@media only screen and (min-width: 390px) {
.template-index .main-content {
padding-top: 100px;
}
}

How can I make the first css code work only on the desktop and the second code only on mobile devices? If I past both codes, only the first is affecting both platforms (desktop and mobile).

Thank you for your help!

The website url is www.skyeandsage.com password: rohlyu

2

SOLVED! With a slight modification I was able to resolve this by using this code combination:

@media only screen and (min-width: 750px) {
.template-index .main-content {
padding-top: 165px;
}
}

@media only screen and (max-width: 390px) {
.template-index .main-content {
padding-top: 100px;
}
}