Media query for larger smartphones such as the note 3 and galaxy s4

Question

Currently I'm using the following media queries to target the general smartphone and mobile device audience:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
.img-logo-main-page{
    display: none;
}
.img-tech-main{
    display: none;
}
.icon-message{
    display: none;
}

}

But for newer, bigger screen devices, this doesn't seem to work! This is how the website looks on a galaxy s3:

And this is how it looks on a galaxy note 3:

Is there a media query for bigger devices such as this one? I've been looking for css-tricks and other forums and websites like that one, but All I could find was the general media query for standard devices like this one: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Any help will be appreciated!

Answer 1

Look the answer here : Twitter Bootstrap 3: how to use media queries?

It's for Twitter's Bootstrap but it should work for you question as well.

Answer 2

You can set your own values for your media queries for min-device-width and max-device-width.

You need to adjust the pixel ratio from default. Try @media only screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) for the Galaxy S3.