Media Query – Suits Theme

montgomerybp · Member · Oct 8, 2014 at 1:13 pm
Copy link

Add topic to favorites
Hi there WordPress.com forum,

I have a very large header on my blog that gets distorted on devices. Does anyone know the CSS to change the URL of and/or hide the header to my blog page on mobile/tablets?

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Oct 8, 2014 at 2:13 pm
Copy link
I wouldn’t advise hiding the header completely, but if you upload a smaller image to your media library then something like this should work for tablet and mobile devices:
```
@media screen and (max-width: 959px) {
  #masthead a.home-link {
    width:100%;
    margin:0;
    background:#000 url("SMALL_IMG_URL") no-repeat center center;
  }
}
```
montgomerybp · Member · Oct 8, 2014 at 4:38 pm
Copy link
Is it possible to make one for tablets and one for mobile?
hallluke · Member · Oct 8, 2014 at 6:07 pm
Copy link
Yes, you can just duplicate the rule and use a different max-width, one that’s narrower to only affect mobile screens.
montgomerybp · Member · Oct 8, 2014 at 6:25 pm
Copy link
Oh, great. OK, one final question, I promise. Could you tell me how to make the text on my navigation bar for this blog larger? The CSS I used for Tech MVP didn’t work.
montgomerybp · Member · Oct 8, 2014 at 7:28 pm
Copy link
Oh, nevermind! I figured it out. Thanks again!

No items found.