Guest Posted December 7, 2012 Share Posted December 7, 2012 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;} Link to comment
Guest Posted December 7, 2012 Share Posted December 7, 2012 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) { …} Link to comment
rgoldman Posted June 25, 2013 Share Posted June 25, 2013 Brilliant, I've searching for a solution for a similar problem and this worked perfectly. Link to comment
kaseymahoney Posted May 4, 2015 Share Posted May 4, 2015 This worked perfectly, thank you! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.