Understanding css media queries

Posted on 2013-12-13
Medium Priority
Last Modified: 2013-12-13
The Samsung Galaxy S3 is 1280x720 .

On my site I have the following

            @media all and (min-width: 1024px){
     #desktophide  {display:none;}
      @media all and (min-width: 1024px){
      img {float:right;padding-left: 10px;}


@media screen and (max-device-width: 480px){
      #mobilehide {display:none;}

I don't want to alter my css because it seems to fit most device perfectly. So if I wanted to target the S III (and I'm assuming they have market share so this is important)

The following wouldn't mess up the site that has rendered in a forgiving manner so far:

@media only screen
and (min-device-width : 720px)
and (max-device-width : 1280px) {
#desktophide {dispay:none;}
Question by:burnedfaceless
  • 2

Author Comment

ID: 39717199
I'm asking because I don't want to walk back into Verizon again they'll recognize it. Best to make sure on here.
LVL 53

Accepted Solution

COBOLdinosaur earned 2000 total points
ID: 39718045
with any cross-device issue on mobile.  It is mostly a matter of trial and error.  Every manufacturer define media query support differently and virtually every manufacture defines resolution differently than the standard (one virtual inch = 96 pixels with the virtual inch defined a default display circuit density unique to the device).

So all you can do is experiment until you get it right.

The state of mobile compatibility is where desktop compatiblity was in 1998 and it took more than 5 years to get manufacturers to agree on standards and another 5 for general support of the standards. With mobile it is going to be even worse because there are more manufacturers.


Author Closing Comment

ID: 39718135
They're bullshit.

Bootstrap was written by some incredible nerds but php is where it's at.

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Recently, we decided that in order to stay competitive in today's IT world, we were going to have to develop and deploy a mobile app for our users and do it quickly. We felt that we were already behind the curve. Users of technology today are mov…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question