CSS edits do not work in mobile view

tarahighwire · Member · Jul 28, 2015 at 4:49 pm
Copy link

Add topic to favorites
I added this override CSS to my Misty Lakes Theme (http://highwirepressblog.wordpress.com), which adds my logo to the top of the page, but in the mobile version, it does not display. How do I get it to show up in the mobile view?

#masthead {
position: relative;
top: 0;
background: url(‘https://highwirepressblog.files.wordpress.com/2015/07/highwirebloglogosmall1-e1438049648776.png’) no-repeat;
width: 700px;
height: 65px;
margin: ;
margin-top: 0;
}

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 28, 2015 at 9:10 pm
Copy link
Hi there, change your custom CSS to the following and see what you think. I’ve put the image into the site title div instead of the masthead div and then changed the height to a min-height and used the !important keyword to force it to use that height. I’ve also changed your top declaration into a padding of 20px since your image was going flush to the top when my browser window was narrowed down to phone size.
```
.site-title {
    background: rgba(0, 0, 0, 0) url("https://highwirepressblog.files.wordpress.com/2015/07/highwirebloglogosmall1-e1438049648776.png") no-repeat scroll 0 0;
    min-height: 65px !important;
    margin: 0;
    position: relative;
    margin-top: 20px;
    width: 700px;
}
```
tarahighwire · Member · Jul 28, 2015 at 9:35 pm
Copy link
It worked!!! Thanks :-) You’re the best, thesacredpath!
thesacredpath · Member · Jul 28, 2015 at 9:44 pm
Copy link
Hooray, thanks and you are welcome. :)

No items found.