PDA

View Full Version : media queries not working


student101
11-15-2014, 06:35 AM
After viewing Creating a mobile-friendly web page with Dreamweaver CS5.5 (http://www.dreamweaverclub.com/mobile-friendly.php) I can't get media queries to work.

<link rel="stylesheet" href="css/style.css" type="text/css" />
http://codepen.io/dentonza/pen/ByaxBe

<link rel="stylesheet" href="css/media.css" type="text/css" />
media.css
/* CSS Document */
/* Phone */
@import url("phone.css") only screen and (max-width:320px);
/* Tablet */
@import url("tablet.css") only screen and (min-width:321px) and (max-width:768px);
/* Desktop */
@import url("desktop.css") only screen and (min-width:769px);

phone.css and tablet.css
@charset "utf-8";
#container {
width: 100%;
min-width: 320px; /*940px;*/
}
#top_menu_panel ul li {
width: 100%;
display: block;
}
#content_right {
float: none;
width: 100%; /*220px;*/
}

student101
11-15-2014, 01:24 PM
I'm open to suggestions on how to make these media queries work
any assistance welcomed :D

student101
11-15-2014, 03:43 PM
resolved thanks for the views :D

d a v e
11-15-2014, 04:43 PM
was it because you linked to the css on codepen? ;)

student101
11-15-2014, 05:04 PM
was it because you linked to the css on codepen? ;)
Sorry, updated codepen same link (http://codepen.io/student101/pen/ByaxBe)
All of the css was needed, I'm not sure I understand -what u asking?

d a v e
11-15-2014, 06:29 PM
you said it was resolved but didn't say what the problem was. i wondered if the problem was because it was linked to the codepen css or... ?

student101
11-15-2014, 06:36 PM
I wasn't too sure myself, I kept clearing cache and testing till I resolved the css queries.
based on css queries my divs weren't showing correctly as per the viewport

I'm a little confused about the min-width and max-width.
I'd prefer that the browser not get resized less than 320px, however my css doesn't do that.