0

I have the following problem with my website. On bigger screens (1300px width and up) my logo in the header "collides" with the body. I have resolved the issue on my home page by adding the following CSS to the 'Custom CSS' field under 'Theme Options':

@media (min-width: 1300px) {
   #header-wrap {
      padding-top: 192px;
   }
   #logo {
      padding: 10px 0 43px 0;
      width: 80%;
   }
   #content {
      padding-top: 100px;
   }
}

Unfortunately the same rules don't work on the other pages. Is there a reason the rules are only applied on the homepage?

  • Could you please share me your site URL where it's displaying so that i can help you to make it work? – Vinod Dalvi Apr 27 '17 at 12:53
  • @VinodDalvi is right share your site URl – Tarun modi Apr 27 '17 at 13:08
  • What theme are you using? – Floyd Apr 27 '17 at 13:37
  • 1
    It's possible that your home page uses a different style sheet to other pages and #logo is also defined elsewhere. The order that your stylesheets are enqueued will also effect this. – TomC Apr 27 '17 at 14:47
0

You can add an extra !important tag.

@media (min-width: 1300px) {
   #header-wrap {
      padding-top: 192px!important;
   }
   #logo {
      padding: 10px 0 43px 0!important;
      width: 80%!important;
   }
   #content {
      padding-top: 100px!important;
   }
}
  • 1
    You could do this, but you might wind up in !important tag hell later on. Refactoring your CSS would be more advisable to this. – Greg McMullen Apr 27 '17 at 15:17
  • Agree with @GregMcMullen (and +1 to him for "!important tag hell"). It's better to figure out the source of the error rather than to use hacky fix. And, as TomC says, your others pages may use different css and this solution wouldn't even work. – Kenneth Odle Apr 27 '17 at 19:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.