Solved

Understanding css media queries

Posted on 2013-12-13
3
342 Views
Last Modified: 2013-12-13
The Samsung Galaxy S3 is 1280x720 .

On my site I have the following

<style>
            @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;}
      
                    
}
</style>

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;}
}
0
Comment
Question by:burnedfaceless
  • 2
3 Comments
 

Author Comment

by:burnedfaceless
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.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 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.

Cd&
0
 

Author Closing Comment

by:burnedfaceless
ID: 39718135
They're bullshit.

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

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.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Owning a franchise can be the dream of a lifetime. It provides a chance for economic growth. You can be as successful as you want.  To make your franchise successful, you need to market it successfully. Here are six of the best marketing strategies …
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

830 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