Top Padding On Mobile

• 

  deadpants · Member · Sep 11, 2013 at 11:37 pm

  • Copy link
  • Add topic to favorites

  Hello. I’m trying to completely remove the background of my blog from mobile only. The dark grey background shows up at the top of the page when viewed from a mobile because that’s the way I have it set when viewed from a computer and it looks good. However on mobile it’s a boring vacant space. Any ideas?
  Already tried this and it didn’t work:

  @media (max-width : 480px) {
  body.custom-background {
  background-image: none;
  }
  }

  The blog I need help with is: (visible only to logged in users)

• 

  ksandness · Member · Sep 12, 2013 at 12:37 am

  • Copy link

  Hi deadpants –

  What if you try this ?
  
  @media (max-width : 480px) {
  body {
  background: none;
  }
  }

  or

  @media (max-width : 480px) {
  body {
  background-color: #fff;
  }
  }

• 

  deadpants · Member · Sep 12, 2013 at 1:02 am

  • Copy link

  No, unfortunately not. Both of them turn the grey at the top of the page white, but the empty space is still there.
  This is what’s creating the space:
  .site {
  margin-top: 42px !important;
  margin-bottom: 12px !important;
  }
  Maybe there is a way to cancel it out for mobile only.

• 

  ksandness · Member · Sep 12, 2013 at 1:27 am

  • Copy link

  What about this?

  @media (max-width : 480px) {
  .site {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  }
  }

• 

  deadpants · Member · Sep 12, 2013 at 10:31 am

  • Copy link

  That did it! Cheers for that.

• 

  ksandness · Member · Sep 13, 2013 at 4:14 am

  • Copy link

  I’m glad to hear it worked. The !important declaration takes precedence over other styles, so we needed to add another !important declaration to overwrite.