Menu icon Foundation
Default Media Queries 5.0.2

Hello,

Today i run simple test for 5.0.2 default media Queries. I create div and give yellow background on phone and green for tablet. Here is the code :

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/modernizr.js"></script>
  </head>
  <body>
     
 	<div class="large-12 columns" id="test"></div>
 
    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>
            

         

        

         // Medium screens
@media only screen and (min-width: 40.063em) {/* min-width 641px, medium screens */ 
    #test {
			background:green
	} 
} 

@media only screen and (min-width: 40.063em) and (max-width: 64em) {/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ 
	#test {
			background:green
	} 
}

So, i think it will be yellow background for phone and green for tablet.

But i cant get the green background for tablet with default media queries.

So i test using pixel width.

@media only screen and (min-width:420px) and (max-width:768px) {
    #test {
		background:green
	}
}
            

         

And now i get the green and yellow background work fine.

Is it only me having this issue or you guys have some experience with this ??

Thanks,

Marko

cssmedia queries

Hello,

Today i run simple test for 5.0.2 default media Queries. I create div and give yellow background on phone and green for tablet. Here is the code :

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/modernizr.js"></script>
  </head>
  <body>
     
 	<div class="large-12 columns" id="test"></div>
 
    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>
            

         

        

         // Medium screens
@media only screen and (min-width: 40.063em) {/* min-width 641px, medium screens */ 
    #test {
			background:green
	} 
} 

@media only screen and (min-width: 40.063em) and (max-width: 64em) {/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ 
	#test {
			background:green
	} 
}

So, i think it will be yellow background for phone and green for tablet.

But i cant get the green background for tablet with default media queries.

So i test using pixel width.

@media only screen and (min-width:420px) and (max-width:768px) {
    #test {
		background:green
	}
}
            

         

And now i get the green and yellow background work fine.

Is it only me having this issue or you guys have some experience with this ??

Thanks,

Marko