CSS3 Media Query not affecting class width -

-

i'm working css media queries responsive web design. keep them organized , easy access, i'm declaring of media queries @ top of css document, this: 

* {margin:0 auto; padding: 0;} body {margin: 0; padding: 0; font: normal 100% helvetica, arial, sans-serif; color: #fff; background: url(../img/defaultnav.jpg); background-repeat: repeat-x;} h1 {font-size: 5.75em; font-weight: 800; text-align: center} h2 {font-size: 2.5em; font-weight: 300; text-align: center; line-height: 50px;} h3 {font-size: 2.5em; font-weight: 100; line-height:50px; color: #666;} h4 {font-size: 1.25em; font-weight: 100; color: #999; margin-top: 10px; margin-bottom:18px;} p {font-size: 1em; color: #999;} {color: #999; text-decoration: none;} a:hover {text-decoration: underline;}  @media screen , (min-width: 1700px) {                                          h1 {font-size: 6.2em;}                                         h2 h3 {font-size: 3.5em;}                                         h4 {font-size: 2.5em;}                                         p {font-size: 2em;}                                         /*.content {max-width: 80em;}*/                                       } @media screen , (max-width: 780px) {  /*.column {float: none; width: auto;}*/ } @media screen , (min-width: 681px) {  .mobilebar, .nav {display: none;}   } @media screen , (max-width: 680px) {  .header .title h1 {font-size: 2.5em;}   h2 {font-size: 1.5em;}  .headersmall .title h1 {font-size: 2.5em;}  } @media screen , (max-width: 500px) {  p {text-align: left;}   } @media screen , (max-width: 320px) {                                         * {text-align: left;}                                         h1 { font-size: 2.5em;}                                         h2 {font-size: 1.2em;}                                         h3 {font-size: 1.6em; line-height: normal; text-align: center;}                                         h4 {font-size: 1.4em; text-align: center;}                                         .content .contenttitles img {display: none;}                                      }

the queries work fine, except 2 have commented out above. (under first 2 queries) 2 queries work if write them under classes trying affect i.e.: 

.content { margin:auto; padding:1em 2em; max-width:35.75em; height:inherit; } @media screen , (min-width: 1700px) {    .content {max-width: 80em;}    }

i don't understand why doing this. i've tried researching here on stack , general google searching can't find results. it's frustrating because keeping code organized. if has idea why happening i'd appreciate help. i'm testing on latest versions of safari , firefox , safari ios if makes difference.

well, max-width: 35.75em in .content rule overriding rule media query. because comes later. that's how cascade works.

how group , order media query rules you, don't kind of special priority on rules coming later, , can overridden other css rule.

your browser's style inspector show styles being applied and/or overridden. know how use it?


Comments

Post a Comment

Popular posts from this blog

html5 - What is breaking my page when printing? -

-
Image
i have questioner , don't know why when printing it's creating break before first question. live demo (link) i able resolve issue removing fieldset container had wrapped in.. having fieldset element causing of fields grouped together, , since not fit on first page, being pushed second page. removing fieldset element, able firefox print first 2 questions on page 1 identically chrome. it seems not new problem firefox , fieldset not playing nice found old bugzilla ticket 2008 has persisted , still being commented on in 2014 (link) if retaining fieldset important, found solution else came here (link) <script type='text/javascript'> $(window).bind('beforeprint', function(){ $('fieldset').each( function(item) { $(this).replacewith($('<div class="fieldset">' + this.innerhtml + '</div>')); } ) }); $(window).bind(
Read more

c# - must be a non-abstract type with a public parameterless constructor in redis -

-
when save object, got below error must non-abstract type public parameterless constructor in order use parameter 't' in generic type or method 'servicestack.redis.redisclient.store<t>(t) redisclass.getinstnace().store(msg); // error here redisclass.getinstnace().save(); as third party's class, can not edit how save object? could create wrapper around third party object call constructor, store wrapper? e.g. public class mywrapper { public thirdpartyobject thirdpartyinstance { get; set; } public mywrapper() { thirdpartyinstance = new thirdpartyobject("constructors"); } }
Read more

ajax - PHP/JSON Login script (Twitter style) not setting sessions -

-
i'm having trouble getting twitter style login work properly, reason gets stuck at session_register("useremail"); session_register("userpass"); and doesn't redirect after it. if enter wrong account data, works , appropriate error message pops up. this full code: <?php if(empty($_post['email']) || empty($_post['password'])) { die(msg(0,"all fields required")); } if(!(preg_match("/^[\.a-z0-9_\-\+]+[@][a-z0-9_\-]+([.][a-z0-9_\-]+)+[a-z]{1,4}$/", $_post['email']))) die(msg(0,"you haven't provided valid e-mail")); $host="localhost"; $username="root"; $password="x"; $db_name="x"; $tbl_name="x"; mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select db"); $useremail=$_post['email']; $userpass=
Read more