CSS affecting mobile version

I used custom CSS to force a certain header margin for my logo and I am hoping to find a way for it not to affect the mobile version of the site. Is there anything I can specify so that the mobile version ignores this code? It looks great in browsers, but weird on mobile.

#logo { width: 100% !important; padding-top:172px; padding-bottom:169px; padding-right:50px; padding-left:50px; margin: 0;}

You can create different CSS for different screen sizes - just place the CSS code this way in the Custom CSS Editor:

@media only screen and (max-width: 3000px) {  /* place CSS for desktop */}@media only screen and (max-width: 1000px) {  /* place CSS for smaller screens}@media only screen and (max-width: 480px) {  /* place CSS for mobile */}

You can have as many sizes as you want – you can check how your site behave just by changing the size of your browser’s window.

It works this way, if you create custom CSS it alters default settings, so if you leave mobile settings empty it will change nothing. So if you want to change only desktop version it should look like that:

@media only screen and (max-width: 3000px) {    #logo {    width: 100% !important;    /* Use the padding shorthand */    padding: 172px 50px 169px 50px;    margin: 0;  }}@media only screen and (max-width: 480px) {   …}

Thanks so much!

Brilliant, I've searching for a solution for a similar problem and this worked perfectly.

This worked perfectly, thank you!