hariskar Posted November 11, 2016 Share Posted November 11, 2016 (edited) In my css I specify only what happens with @media screen and (max-width:1000px) Is that correct? Should I not specify what should happen with width > 1000px? Of course some rules are common for <1000px and >1000px, but some are only for >1000px. Now they are just overridden by the @media screen and (max-width:1000px) rules. Would it be better to add a @media screen and (min-width:1001px) for these? *{box-sizing:border-box} html{overflow-y:scroll;position:relative;height:100%} header.top{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2} header>.container{overflow:visible;white-space:nowrap} #nav a{color:#d2dce6;display:block;padding:3px 4px;font-weight:bold} #nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left} #nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4} #l1{color:#f2f2f2;font-size:19px} #l2{color:#d2dce6;font-size:14px} #logoArea{display:inline-block;float:none;vertical-align:top;font-weight:bold;font-family:Arial} #logoArea>a{white-space:normal} #logoArea>a div{margin-left:12px} #nav{list-style:outside none none;overflow:hidden;margin:0;padding:0} #navArea{display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap} .container{width:81%;margin:0 auto;max-width:1000px} aside{height:100%;margin:12px 0 15px 0} h1{color:#4a6b98;font-size:21px} h2{font-size:19px} #block1{height:auto;margin-top:14px} #block1 ul{height:auto;padding:0;margin:0} #block1 li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9} #block1 a{display:block;font-weight:bold} #block1 a:hover,#block1 li a.selected{color:#262626} #block1 li:first-child{border-top:1px solid #d9d9d9} #block2,#block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px} #block2 h2,#block3 h2{margin:0;font-size:18px} #block2 p,#block3 p,#block2 form{font-size:13px} body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:15px;color:#404040;line-height:1.5} body a{text-decoration:none;color:#4a6b98} #content{margin:26px 0 15px} footer.col-12{position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;margin-top:-100px;background-color:#dae4f1;border-top:#6e98c2 2px solid} footer p{font-size:12px;margin:0;line-height:1.43} #iso{float:left;margin-right:5px} #p1,#c{color:#1a3365} #p2{color:#dae4f1} ul.topnav li.icon{display:none} .row::after{content:"";clear:both;display:block} [class*="col-"]{float:left;padding:15px} .col-2{width:16.6667%} .col-3{width:25%} .col-4{width:33.3333%} .col-9{width:75%} .col-12{width:100%} #wrapper{min-height:100%} aside:after,#content:after{content:"";display:block;padding-bottom:100px} @media screen and (max-width:1000px){aside:after{padding-bottom:15px} #content h1:first-child{margin:0 auto;display:block} ul.topnav li:not(:first-child){display:none} ul.topnav li.icon{float:right;display:inline-block} #logoArea{display:block;text-align:center} header.top{height:auto} #navArea{display:block;height:30px;margin:1em 15px} [class*="col-"]{width:100%} #nav li{float:none;margin:0;background-color:#1a3365} #nav{position:absolute;left:0;right:0} ul.topnav li.icon{display:inline-block;position:absolute;right:0;top:0} #nav a{font-size:16px} #content{margin-top:0} aside{margin-bottom:0} .container{width:auto} ul.topnav.responsive{position:relative} ul.topnav.responsive li.icon{position:absolute;right:0;top:0} ul.topnav.responsive li{float:none;display:block;margin:0} ul.topnav.responsive li a{display:block;text-align:left} #nav.topnav.responsive>li:not(:first-child):not(:last-child){margin-top:-2px}} Edited November 11, 2016 by hariskar Link to comment Share on other sites More sharing options...
Ingolme Posted November 11, 2016 Share Posted November 11, 2016 Generally I just let the CSS cascade and override anything that needs to be changed, but there isn't a problem if you want to add a media query to exclude some of the styles on different screen sizes. 1 Link to comment Share on other sites More sharing options...
hariskar Posted November 11, 2016 Author Share Posted November 11, 2016 (edited) Thank you, if I do this, is there any change that this message: "Eliminate render-blocking CSS in above-the-fold content" in google pagespeed goes away? Edited November 11, 2016 by hariskar Link to comment Share on other sites More sharing options...
Ingolme Posted November 11, 2016 Share Posted November 11, 2016 You can't make it go away, because CSS actually needs to block rendering. You can make it less of a problem by reducing the number of HTTP requests necessary to load stylesheets. Mainly, don't have more than one stylesheet on your page. 1 Link to comment Share on other sites More sharing options...
hariskar Posted November 11, 2016 Author Share Posted November 11, 2016 I thought that if the css code for each screen would be eliminated, the message could go away. I have only one small 3366kB css. I can't understand why google suggests this. If I put the code of the css in the head, the message goes away and I get 100/100 for both Desktop and mobile. But noway will I put my css in every single page... This suggestion seems wrong to me. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now