how to do media query

[piano0011]

Hello!

I am trying to follow your guide here in how to do a media query for landscape but it doesn’t mention anything about changing the width! I am using the chrome extension and when I click on the landscape mode, it says that the width is suddenly 640px for samsung S3 instead of 320pixel, could you clarify that?

from,

Mervin

[Beverleyh]

I don’t really understand what it is you are asking but this sounds like it has something to do with double pixel density. Basically, a pixel isn’t a pixel anymore now that we have high def/retina screens.

Try researching -webkit-device-pixel-ratio:2 media queries if you are specifically trying to target that particular device.

If you need specific help, please provide a reduced demo of your code in CodePen, and clearly explain the problem vs what you expect to happen and what you’d like to achieve.

[piano0011]

I am trying to follow one of your guidelines and in the example provided, it says that both the samsung galaxy s3 portrait and landscape are both 320 pixel wide but is this incorrect because according to google chrome, it is displaying the galaxy s3 landscape as 640 pixel…..

from,

Mervin

[Beverleyh]

I don’t know what guide you’re refering to but please see my previous post; try researching more about the areas/topics mentioned there.

Additionally, I wouldn’t focus on targeting specific device sizes if I were you. Rather than trying to design for specific size screens (that are changing all the time), design for your own content, and modify the layout based on your own breakpoints. Basically, pull in the browser width/height, and when the layout starts to look dodgy, change it in a media query for that size so that it looks good again.

If you need specific help though, please provide a reduced demo of your own code in CodePen, and clearly explain the problem vs what you expect to happen and what you’d like to achieve.

[Author]

Posts