Retina display media queries on sample child theme

Community Forums Forums Design Tips and Tricks Retina display media queries on sample child theme

This topic is: not resolved

Tagged: ,

This topic contains 3 replies, has 2 voices, and was last updated by  RobCubbon 8 months, 2 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #94067

    RobCubbon
    Participant
    Post count: 105

    Hi,

    I have changed the header image on my sample child theme.

    In the Genesis settings I have “Use for site title/logo: Image logo” – obviously.

    And then I’ve over-written the logo.png that exists in the images folder. (I have made this634 x 169px a different size than the existing one and I will create a media query to make sure I show another narrower logo when the site is viewed on a device with a narrower width than 634px).

    So, all well and good. However I’ve noticed the following CSS in the styles.css and I just wanted to check what it was all about.

    
    @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) {
    
    	.header-image .site-header .wrap {
    		background: url(images/logo@2x.png) no-repeat left;
    		background-size: 320px 164px;
    	}
    
    }
    

    It’s looks like it’s to do with retina display devices that I wonder what size logo I should put overwrite the logo@2x.png

    The original logo.png is 360 x 164
    The original logo@2x.png is 720 x 328

    My new logo.png is 634 x 169
    What should my new logo@2x.png be?

    I just wanna check if that doubling it up is the correct thing to do – I know nothing about retina display.


    #94079

    nutsandbolts
    Keymaster
    Post count: 3187

    Normally you’d want to create a logo@2x.png that is double the size of your regular logo – that allows it to look crisp on retina mobile devices. However, since your logo is a different size than the Sample theme’s default, you’ll likely need to make some other changes.

    The CSS rule you pasted in above is basically saying “Use this much larger image (i.e. more pixels), but keep it at the original 320px by 164px size so it fits on the screen.”

    Since 320px is the max width for most mobile phones, I would probably change images/logo@2x.png to images/logo.png but make the background size half what it is on the normal logo. So you’d have this:

    @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) {
    
    	.header-image .site-header .wrap {
    		background: url(images/logo.png) no-repeat left;
    		background-size: 317px 85px;
    	}
    
    }

    That will have the same effect as far as using a higher res image squeezed into the right size for mobile, but without making your image so enormous that it doesn’t fit. Hopefully that makes sense – this is all a shot in the dark since I don’t have a link to the site to look.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #94091

    RobCubbon
    Participant
    Post count: 105

    Thank you so much, nutsandbolts, I think I am understanding of these retina device media queries a little bit better – thank you so much.

    Just to muddy the waters still further, I have added the following to my CSS this is to ensure my logo fits into the narrower devices:

    
    @media only screen and (max-width: 1023px) {
    
    .header-image .site-header .wrap {
    		background: url(images/logo2.png) no-repeat;
    		background-size: 320px 164px;
    	}
    
    }
    

    So this logo2.png is 320 pixels by 164 pixels.

    So maybe this would simplify things. As my logo on devices narrower than 1023 pixels wide will be the normal size, 320 pixels by 164 pixels, then I could keep the logo@2x.png as the same size as the original (720px x 328px) and keep the retina media queries the same as well.

    Would that work?

    The site isn’t live yet but it will be very soon I hope.


    #94256

    RobCubbon
    Participant
    Post count: 105

    I guess I will keep the retina display media queries as is and create a 2x larger version of the logo.


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

You must be logged in to reply to this topic.