0

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:

enter image description here

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

enter image description here

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!

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
CodeTrooper
  • 1,890
  • 6
  • 32
  • 54

2 Answers2

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.

Community
  • 1
  • 1
bobek
  • 8,003
  • 8
  • 39
  • 75
0

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • And for note use @media only screen and (max-width: 360px) and (max-height: 640px) and (-webkit-device-pixel-ratio: 3) – Da Pri Sep 21 '20 at 09:53