logo@2x for retina for Ally

Tagged: logo@2x, retina logo

This topic has 3 replies, 2 voices, and was last updated 8 years, 2 months ago by Wes.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
May 30, 2014 at 1:31 am #12500

Daryn
Customer

Hi Wes,
I’m trying to get this to work but have a feeling I have been starting at the screen for so long that I am missing something obvious. I am using the media query below however on a mobile device I end up with 2 logos showing slightly offset – the original (250px x 85px uploaded via custom header image) as well as the @2x version. Why is the custom header version not being overwritten?

Note: the problem will not be visible as the site is live – I have just commented out the media query until I can figure out what I am missing.

Any help would be appreciated! Thanks!

The site is crossfitnorthvancouver.com

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution:120dpi) {

.custom-header .site-title a {
background: url(/wp-content/uploads/2014/05/logo@2x.png) no-repeat left !important;
background-size: 250px 85px !important;
}

}

May 30, 2014 at 7:30 pm #12515
Wes
Moderator
Try changing it to .site-container .site-header instead. You’ll also need to center it since it will show up to the left by default. Here is an example –
```
.site-container .site-header {
	background: url(/wp-content/uploads/2014/05/logo@2x.png) no-repeat left !important;
	background-size: 250px 85px !important;
	background-position: top center !important;
}
```
So replace the code you have with the code above and let me know if that fixes it.
June 2, 2014 at 2:26 pm #12546

Daryn
Customer

Fixed thank-you!

June 2, 2014 at 3:48 pm #12547

Wes
Moderator

You’re Welcome!
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘logo@2x for retina for Ally’ is closed to new replies.