Jump to content

CSS affecting mobile version

Recommended Posts

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
  • Replies 4
  • Views 31.3k
  • Created
  • Last Reply

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
  • 6 months later...
  • 1 year later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.