Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
getfoxtales

CSS affecting mobile version

Question

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;}

Edited by Jkizmann
retag

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 9

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) {   …}

Edited by GRSM
Combine answers

X-Gen born digital. Food Enthusiast. Traveler.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...