I've been trying to learn flexbox and I messed around with my codepen on mobile and something happened, I can't pin-point the problem but it keeps giving me an error and I can not for the life of me spot it! Everything seems fine.
The code isn't amazing, I'm not great at coding yet, it's not DRY, it's messy, not very readable and whatever else but it was working. The page was working even with the error. Now it isn't doing anything at all, won't even load.
There is an error in the CSS editor and I can not fix it!
Please help me, it's really annoying me, I've been looking through it for hours changing things.
Here is the codepen: http://codepen.io/joecox91/pen/GrJXQX
Sorry I can't remember how to embed the codepen into the question!
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,400');
* {
padding:0;
margin:0;
text-decoration:none;
box-sizing:border-box;
}
body, html {
padding:0;
margin:0;
width:100%;
height:100%;
}
header {
background:#ffffff;
border-bottom:1px solid #cccccc;
}
/* flex-flow: flex-direction flex-wrap */
.container {
display:-webkit-flex;
display:flex;
justify-content:center;
flex-flow: row wrap;
}
/* flex:flex-grow flex-shrink flex-basis */
.container section {
height:auto;
flex-grow:1;
padding:20px 0;
flex-shrink:1;
flex-wrap:wrap;
}
.two {
align-content:space-around;
margin:40px 20px;
font-family: 'Roboto Mono', monospace;
}
#content {
padding:20px;
width:60%;
}
#sidebar {
background:black;
width:20%;
}
// .container section:nth-child(2n) {
// background:black;
// }
#header {
display: flex;
height:100%;
align-items:center;
justify-content: center;
flex-flow:column wrap;
font-family:helvetica;
h1 {
font-size:2em;
letter-spacing:1.5px;
}
h2 {
font-size:1.2em;
}
}
#nav {
display:flex;
justify-content:center;
align-items:center;
a {
padding:20px;
color:#aaaaaa;
font-family:helvetica;
font-size:14px;
margin-right:1px;
text-transform:uppercase;
border-bottom:2px solid white;
transition:0.2s ease-out;
&.active {
border-bottom:2px solid black;
color:black;
}
&:last-child {
margin-right:0;
margin-left:20px;
border:1px solid #aaaaaa;
border-radius:5px;
&.active {
border:1px solid black;
}
}
&:hover {
color:black;
transition:0.2s ease-out;
&:last-child {
border:1px solid black;
}
}
}
}
.spin1 {
position:relative;
animation:menutate 1.5s infinite;
animation-timing-function: linear;
top:-1px;
left:10px;
width:1px;
border-top:5px solid rgba(0,0,0,0);
border-right:5px solid white;
border-left:5px solid white;
border-bottom:5px solid rgba(0,0,0,0);
background:black;
}
#mobile-menu {
display:none;
}
#mobile-header {
}
#keyframes menutate {
0% {
transform:rotate(0);
}
100% {
transform:rotate(360deg);
}
}
#navi {
display:none;
}
#media screen and (max-width:720px) {
.container,
.two, {
flex-flow:column wrap;
}
#content {
width:100%;
}
#sidebar {
width:100%;
}
#navi {
position:absolute;
display:block;
height:100%;
top:0;
left:0;
background:deepskyblue;
width:80%;
transform:translate(-100%);
z-index:10000;
}
#navi.extend {
box-shadow:0px 0px 10px 10px rgba(0,0,0,0.4);
}
#header {
justify-content:flex-end;
align-items:flex-end;
padding-right:20px;
h1 {
padding:0;
margin:0;
}
}
#nav {
display:none;
}
.mobile-hide {
display:none;
}
body {
position:relative;
transform:translate(0);
transition:0.3s ease-out;
}
body.extend {
transform:translateX(80%);
transition:0.3s ease-out;
}
#mobile-menu {
position:fixed;
top:22px;
left:20px;
display:block;
height:50px;
overflow:none;
width:50px;
padding:8px;
z-index:500000;
transition:0.2s ease;
filter: opacity(1);
&.extend {
transform:translateX(-180%);
transition:0.4s ease;
}
&:hover {
cursor:pointer;
transition:0.5s ease;
filter:opacity(0.6);
}
span {
position:absolute;
height:4px;
background:black;
width:40px;
text-align:center;
transition:0.5s ease;
&.menu-animate {
transition:0.5s ease;
}
&:hover {
cursor:pointer;
}
&:last-child {
border:none;
font-size:12px;
background:none;
height:auto;
width:40px;
top:38px;
text-align:center;
}
&:nth-child(1) {
top:8px;
&.menu-animate {
top:13px;
transform:rotate(45deg);
}
}
&:nth-child(2) {
top:18px;
&.menu-animate {
top:13px;
transform:rotate(-45deg);
}
}
&:nth-child(3) {
top:28px;
&.menu-animate {
top:13px;
filter:opacity(0);
}
}
}
}
}
There is the SASS, or half SASS. The problem I'm getting is:
Invalid CSS after "... position:fixed": expected "{", was ";"
This makes no sense to me! Why would it be expecting an opening curly bracket anywhere? After position:fixed... What is going on?
Send help!
Thank you
The issue is that you have some strange spacing characters on few lines of your SCSS - this is tripping up Sass. If you replace those with proper spaces things seem to work:
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,400');
* {
padding:0;
margin:0;
text-decoration:none;
box-sizing:border-box;
}
body, html {
padding:0;
margin:0;
width:100%;
height:100%;
}
header {
background:#ffffff;
border-bottom:1px solid #cccccc;
}
/* flex-flow: flex-direction flex-wrap */
.container {
display:-webkit-flex;
display:flex;
justify-content:center;
flex-flow: row wrap;
}
/* flex:flex-grow flex-shrink flex-basis */
.container section {
height:auto;
flex-grow:1;
padding:20px 0;
flex-shrink:1;
flex-wrap:wrap;
}
.two {
align-content:space-around;
margin:40px 20px;
font-family: 'Roboto Mono', monospace;
}
#content {
padding:20px;
width:60%;
}
#sidebar {
background:black;
width:20%;
}
// .container section:nth-child(2n) {
// background:black;
// }
#header {
display: flex;
height:100%;
align-items:center;
justify-content: center;
flex-flow:column wrap;
font-family:helvetica;
h1 {
font-size:2em;
letter-spacing:1.5px;
}
h2 {
font-size:1.2em;
}
}
#nav {
display:flex;
justify-content:center;
align-items:center;
a {
padding:20px;
color:#aaaaaa;
font-family:helvetica;
font-size:14px;
margin-right:1px;
text-transform:uppercase;
border-bottom:2px solid white;
transition:0.2s ease-out;
&.active {
border-bottom:2px solid black;
color:black;
}
&:last-child {
margin-right:0;
margin-left:20px;
border:1px solid #aaaaaa;
border-radius:5px;
&.active {
border:1px solid black;
}
}
&:hover {
color:black;
transition:0.2s ease-out;
&:last-child {
border:1px solid black;
}
}
}
}
.spin1 {
position:relative;
animation:menutate 1.5s infinite;
animation-timing-function: linear;
top:-1px;
left:10px;
width:1px;
border-top:5px solid rgba(0,0,0,0);
border-right:5px solid white;
border-left:5px solid white;
border-bottom:5px solid rgba(0,0,0,0);
background:black;
}
#mobile-menu {
display:none;
}
#mobile-header {
}
#keyframes menutate {
0% {
transform:rotate(0);
}
100% {
transform:rotate(360deg);
}
}
#navi {
display:none;
}
#media screen and (max-width:720px) {
.container,
.two, {
flex-flow:column wrap;
}
#content {
width:100%;
}
#sidebar {
width:100%;
}
#navi {
position:absolute;
display:block;
height:100%;
top:0;
left:0;
background:deepskyblue;
width:80%;
transform:translate(-100%);
z-index:10000;
}
#navi.extend {
box-shadow:0px 0px 10px 10px rgba(0,0,0,0.4);
}
#header {
justify-content:flex-end;
align-items:flex-end;
padding-right:20px;
h1 {
padding:0;
margin:0;
}
}
#nav {
display:none;
}
.mobile-hide {
display:none;
}
body {
position:relative;
transform:translate(0);
transition:0.3s ease-out;
}
body.extend {
transform:translateX(80%);
transition:0.3s ease-out;
}
#mobile-menu {
position:fixed;
top:22px;
left:20px;
display:block;
height:50px;
overflow:none;
width:50px;
padding:8px;
z-index:500000;
transition:0.2s ease;
filter: opacity(1);
&.extend {
transform:translateX(-180%);
transition:0.4s ease;
}
&:hover {
cursor:pointer;
transition:0.5s ease;
filter:opacity(0.6);
}
span {
position:absolute;
height:4px;
background:black;
width:40px;
text-align:center;
transition:0.5s ease;
&.menu-animate {
transition:0.5s ease;
}
&:hover {
cursor:pointer;
}
&:last-child {
border:none;
font-size:12px;
background:none;
height:auto;
width:40px;
top:38px;
text-align:center;
}
&:nth-child(1) {
top:8px;
&.menu-animate {
top:13px;
transform:rotate(45deg);
}
}
&:nth-child(2) {
top:18px;
&.menu-animate {
top:13px;
transform:rotate(-45deg);
}
}
&:nth-child(3) {
top:28px;
&.menu-animate {
top:13px;
filter:opacity(0);
}
}
}
}
}
Here's the Codepen with the fix.
I recommend using an editor with "Show Invisibles" turned on so you can easily see issues like this.
I am making a fancy CSS theme for my tumblr. But my vertical scrollbar has vanished, and pressing "page down" has no effect. It is like the lower half of my page no longer exists, or the page is forced to be the size my browser window is. Indeed - if I resize my browser window, suddenly I see that amount of content and can't scroll down to see the stuff I could see a moment ago.
I have read some things on the internet already to solve this problem, such as adding "overflow:auto" or "overflow:scroll", but either I have have added them in the wrong place or they do not solve the problem I have. I have also tried manually adding a scrollbar in the html {} tag. If I do that, the scrollbar reappears - but it doesn't actually work. It appears all blocked in gray, as if you are already viewing the whole page, while displaying my content cut-off.
Very frustrated as the page is, apart from this, done. Any obvious ideas?
<!--CSS customization here. -->
<style type="text/css">
html {overflow-y: scroll;}
#text {
margin-bottom:50px;
margin-top:100px;
margin-top:5px;
text-transform:uppercase;
font-size:1em;
font-famiy:serif;
letter-spacing:2px;
text-align:center;}
/*main structure*/
blockquote {
padding:5px 0 5px 30px;
border-left:1px solid #eee;
margin:10px 30px;
overflow: auto;
}
body {
background-repeat:repeat-y;
background-size: cover;
font-family:serif;
font-weight:100;
font-size:1em;
text-align:left;
margin:0;
line-height:18px;
overflow:auto;
}
a {
color:black;
text-decoration:none;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s; }
a:hover {
color:#45b69d;
}
img{
border:1px solid #fff;
border-radius:6px;
}
p {
margin-top:5px;
margin-bottom:5px}
#divider{
top:25px;
left:305px;
position:fixed;
width:420px;
position:absolute;
}
#dividerr{
bottom:20px;
left:37px;
width:420px;
position:fixed;
}
/*container*/
#con {
width:80%;
margin:0 10%;
position:fixed;
overflow:auto;
}
/*posts*/
.posts {
width:45%;
height:300px;
padding:4px;
background:white;
float:left;
margin:20px 20px;
border:1px solid #ffcec7;
border-radius:6px;
z-index:3;
}
#image {
position:absolute;
padding-top:8px;
padding-left:5px;
margin-right:5px;
}
#image img {
width:190px;
border:1px solid #fff;
border-radius:6px;
margin-right:8px;
}
.info {
margin-left:205px;
width:65%;
text-transform:none;
}
.tit {
font-weight:bold;
text-align:right;
font-family:georgia;
color:#ffa79b;
font-size:1.5em;
letter-spacing:1px;
text-transform:uppercase;
}
.lank {
border-bottom:1px dashed #ffcec7;
margin-bottom:5px;
padding-bottom:5px;}
.about ul {margin-left:-10px}
.quest {
font-size:1.25em;
font-family:Helvetica;
font-variant:small-caps;
}
.answ {
margin-top:10px;
margin-left:40px;
font-family:Georgia;
}
.grave {
text-align:center;
font-weight:bold;
margin-top:10px;
font-family:georgia;
font-size:1.5em;
letter-spacing:1px;
font-style:italic;
color:#cdba96;
}
.credit {
width:45%;
height:auto;
padding:4px;
background:white;
float:left;
margin:20px 20px;
border:1px solid #ffcec7;
border-radius:6px;
z-index:3;
}
/*header*/
.headertext {
color:beige;
font-size:6em;
letter-spacing:1em;
text-align:center;
font-family:Helvetica,sans-serif;
line-height: 80%;
height: auto;
}
.l {
background:#fff;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding:2px;
text-align:center;
font-family:inconsolata;
text-transform:uppercase;
border:1px solid #ffcec7;
border-radius:6px;
}
#title {
width:50%
font-size:14px;
margin:auto 0;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
color:#ffcec7;
background:#f8f8f8;
padding:15px;
border-bottom:1px solid #eee;}
.links {
color:#ffa79b;
font-family:georgia;
padding-top:10px;
text-align:center;
padding-bottom:5px;
border-bottom:1px dashed #ffcec7;
}
.links a {
margin:10px 5px;
padding:2px 5px;
border:none;
}
.links a:hover {
background:#f8f8f8;
border-radius:6px;
}
.desc {
text-transform:none;
margin:10px 25px;
font-family:Georgia;
}
Alrighty, so I managed to fix the thing by taking one element at a time. The problem was in
container {position:fixed;}
but I'm not sure why. I was using the position:fixed to center my background. Leaving this in case it helps someone in future.
firefox:
chrome:
does anyone know why this is happening in Firefox? it's driving me nuts
here is the css:
#gallery_grid .gallery_grid_item,#related_topics .gallery_grid_item,#popular_galleries .gallery_grid_item {
position:relative;
overflow:hidden;
display:block;
text-decoration:none;
}
#gallery_grid .gallery_grid_item {
width:288px;
height:260px;
box-shadow:0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow:0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow:0 1px 3px rgba(34,25,25,0.4);
transition:margin .1s;
-moz-transition:margin .1s;
-webkit-transition:margin .1s;
-o-transition:margin .1s;
margin:15px;
}
#gallery_grid .gallery_grid_item:hover {
margin:13px 15px 17px;
}
#gallery_grid .gallery_grid_image_wrapper {
width:100%;
height:190px;
overflow:hidden;
}
#gallery_grid .gallery_grid_image {
min-height:100%;
}
#popular_galleries .gallery_grid_item,#gallery_grid .gallery_grid_item {
border:1px solid #999;
}
#related_topics .gallery_grid_item {
border:0!important;
width:242px;
height:140px;
overflow:hidden;
background:#181818;
margin:0;
}
#popular_galleries .gallery_grid_item {
width:200px;
height:140px;
letter-spacing:-.05em;
background:#181818;
margin:0 0 15px;
}
#popular_galleries.upsell .gallery_grid_item {
height:200px;
}
#related_topics .gallery_grid_item:nth-child(even) {
border:1px solid #777!important;
border-width:0 1px;
}
#gallery_grid .gallery_grid_item:hover,#related_topics .gallery_grid_item:hover,#popular_galleries .gallery_grid_item:hover {
border:1px solid #86d3ff;
}
#gallery_grid .gallery_grid_image,#related_topics .gallery_grid_image,#popular_galleries .gallery_grid_image,#related_topics .gallery_list_image {
width:100%;
overflow:hidden;
opacity:.9;
filter:alpha(opacity=90);
transition:opacity .1s;
-moz-transition:opacity .1s;
-webkit-transition:opacity .1s;
-o-transition:opacity .1s;
text-align:center;
display:block;
margin:0 auto;
}
#gallery_grid .gallery_grid_item:hover .gallery_grid_image,#related_topics .gallery_grid_item:hover .gallery_grid_image,#popular_galleries .gallery_grid_item:hover .gallery_grid_image,#related_topics .gallery_list_item:hover .gallery_list_image {
opacity:1;
filter:alpha(opacity=100);
}
#popular_galleries .gallery_grid_info,#related_topics .gallery_grid_info {
width:100%;
position:absolute;
bottom:0;
font-weight:500;
}
#gallery_grid .gallery_grid_info {
height:62px;
}
#related_topics .gallery_grid_info {
height:54px;
}
#popular_galleries .gallery_grid_info {
height:58px;
}
#related_topics.grid .gallery_title,#popular_galleries .gallery_title {
color:#fff;
text-shadow:1px 0 1px #000;
font-size:15px;
line-height:18px;
}
#gallery_grid .gallery_title {
font-size:16px;
line-height:21px;
color:#000;
text-shadow:none;
font-weight:600;
border-top:2px solid #00a3ff;
padding:10px 15px 0;
}
#gallery_grid .gallery_title:hover {
text-decoration:underline;
}
#popular_galleries .gallery_title {
height:39px;
overflow:hidden;
}
.trans_bg {
width:100%;
height:100%;
background:#000;
opacity:.5;
filter:alpha(opacity=50);
}
.content_over_transparent {
position:absolute;
top:0;
width:100%;
height:100%;
overflow:auto;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#gallery_grid .content_over_transparent,#related_topics .content_over_transparent {
padding:10px 15px 0;
}
#popular_galleries .content_over_transparent {
padding:10px 10px 0;
}
It's "content_over_transparent". Appreciate any help, thanks!
Edit:
Here is the grid item HTML (adding more content as it saying it's mostly code):
<a class="gallery_grid_item" href="#">
<img class="gallery_grid_image" src="http://d1qfo1bk8s78mq.cloudfront.net/uimg/5f9aa039ecf554f73312d912e22c516e.x355" />
<div class="gallery_grid_info">
<div class="trans_bg"></div>
<div class="content_over_transparent">
<p class="gallery_title">Finding your Perfect Red</p>
</div>
</div>
</a>
Add overflow: hidden; in .content_over_transparent, and it displays well both on FF and Chrome :
.content_over_transparent {
position:absolute;
top:0;
width:100%;
height:100%;
overflow:auto; /* Delete that */
box-sizing:border-box;
-moz-box-sizing:border-box;
overflow: hidden; /* Add that */
}
By the way, in your question you forgot to wrap your HTML code in a #popular_galleries.
Here's the fiddle : Fiddle
I have a completely valid CSS stylesheet, which works, and queries are recognized, but when I minify (and concatenate) the stylesheets with SquishIt, the media queries seemingly stop working, and I can't figure out why.
This is the minified CSS, beautified:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
outline:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
background:transparent;
color:inherit;
margin:0;
padding:0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
body {
line-height:1;
word-wrap:break-word;
overflow-x:hidden;
font-family:"Helvetica Neue","Lucida Grande","Segoe UI",Arial,Helvetica,Verdana,sans-serif;
}
ol,ul {
list-style:none;
margin-bottom:1em;
margin-left:30px;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:none;
}
:focus {
outline:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
th {
text-align:left;
}
.layout-section {
width:93.75%;
text-align:left;
margin:0 auto;
}
header#layout-header {
margin-bottom:20px;
padding:12px 0;
}
header#layout-header h1 {
display:inline-block;
font-family:Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,Helvetica,sans-serif;
font-weight:700;
font-size:2.4em;
margin:0 auto;
}
section#layout-content {
padding:6px 0;
}
section#layout-content h1 {
margin-bottom:12px;
}
#noscript-padding {
padding-bottom:37px;
}
#noscript-notice {
position:fixed;
top:0;
left:0;
width:100%;
z-index:99;
text-align:center;
font-family:sans-serif;
font-weight:700;
font-size:1.1em;
background-color:#ce756b;
color:#fff;
border-bottom:2px solid #9d0000;
cursor:not-allowed;
padding:6px 0;
}
#noscript-notice .ie-warning {
padding-top:6px;
}
html,body,form {
height:100%;
}
section#layout-container {
min-height:100%;
height:auto!important;
margin:0 auto -72px;
}
a#menu-icon {
float:right;
font-size:12px;
font-weight:700;
line-height:22px;
height:22px;
letter-spacing:.1em;
margin-top:10px;
color:#fff;
background:#4e4e4e;
text-transform:uppercase;
text-decoration:none;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
padding:0 10px;
}
nav#menu {
margin-top:30px;
}
nav#menu ol {
background:#1c1c1c;
padding:5px 0;
}
nav#menu li a {
display:block;
font-weight:700;
text-transform:uppercase;
letter-spacing:.1em;
line-height:2em;
height:2em;
color:#fff;
text-decoration:none;
border-bottom:1px solid #383838;
padding:0 20px;
}
nav#menu li:last-child a {
border-bottom:none;
}
.left {
float:left;
}
.right {
float:right;
}
.hidden {
display:none!important;
}
h1 {
font-size:1.6em;
}
h2 {
font-size:1.5em;
}
h3 {
font-size:1.4em;
}
h4 {
font-size:1.3em;
}
h5 {
font-size:1.2em;
}
h6 {
font-size:1.1em;
}
hr {
border:0 none;
height:1px;
margin-bottom:20px;
}
blockquote {
margin-bottom:10px;
padding:10px 10px 1px;
}
pre,code {
font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace,serif;
}
pre {
margin-bottom:10px;
max-height:600px;
overflow:auto;
width:auto;
padding:5px;
}
b,strong,.bold {
font-weight:700;
}
i,em,.italic {
font-style:italic;
}
del {
text-decoration:line-through;
}
img {
border:none;
}
ol,ul,li,p {
word-wrap:break-word;
}
ol {
list-style:decimal outside none;
}
ul {
list-style:disc outside none;
}
nav ol,nav ul {
list-style:none;
margin:inherit;
}
form legend {
padding-bottom:12px;
}
form input,form textarea,form button,form a.button {
margin-bottom:10px;
margin-right:3px;
display:inline-block;
padding:8px;
}
form input[type=text],form input[type=password],form textarea {
width:75%;
}
form input[type=submit],form form button.submit {
display:block;
text-align:center;
}
fieldset .field-validation-valid,fieldset .field-validation-error {
font-size:.8em;
display:block;
margin-bottom:15px;
}
fieldset .field-validation-valid.tooltip-icon,fieldset .field-validation-error.tooltip-icon {
display:inline-block;
margin-bottom:0;
background-image:url(/content/images/sprites/icons.png);
width:16px;
height:16px;
vertical-align:middle;
}
fieldset .field-validation-valid.tooltip-icon {
background-position:-208px -192px;
}
fieldset .field-validation-error.tooltip-icon {
background-position:-32px -192px;
}
.dialog {
display:none;
position:absolute;
top:50%;
left:50%;
font-size:100%;
background-color:#fff;
border:2px solid #222;
padding:15px;
}
.dialog>header {
font-family:Trebuchet MS,Helvetica,sans-serif;
font-size:1.4em;
font-weight:700;
margin-bottom:7px;
text-decoration:underline;
}
.dialog.notification {
cursor:pointer;
-webkit-box-shadow:2px 2px 5px #400;
-moz-box-shadow:2px 2px 5px #400;
box-shadow:2px 2px 5px #400;
color:#fff;
}
.dialog .dialog-buttons {
text-align:right;
margin-top:20px;
}
.tooltip {
text-align:center;
color:#fff;
background:#111;
position:absolute;
z-index:100;
padding:15px;
}
.tooltip:after {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #111;
content:'';
position:absolute;
left:50%;
bottom:-10px;
margin-left:-10px;
}
.tooltip.tooltip-top:after {
border-top-color:transparent;
border-bottom:10px solid #111;
top:-20px;
bottom:auto;
}
.tooltip.tooltip-left:after {
left:10px;
margin:0;
}
.tooltip.tooltip-right:after {
right:10px;
left:auto;
margin:0;
}
nav#menu li span {
color:#fff;
}
nav#menu li a:hover,nav#menu li a:focus {
color:#1c1c1c;
background:#ccc;
}
a,button,input[type=submit] {
cursor:pointer;
}
button.disabled,a.button.disabled {
cursor:not-allowed;
}
nav a,button.submit,input[type=submit] {
font-variant:small-caps;
}
input[type=submit],button.submit,a.button {
border:1px solid #313131;
background-color:#dbdbdb;
color:#171515;
}
form input.valid {
background-color:#F0FFFF;
}
form input.input-validation-error {
background-color:#fff0ff;
}
.dialog.notification.notification-error {
background-color:#ce756b;
border:2px solid #9d0000;
}
.dialog.notification.notification-message {
background-color:#ff8c00;
border:2px solid #cc8c00;
}
.exception {
padding:8px;
}
.exception>header {
font-weight:700;
font-size:1.1em;
color:#c00000;
margin-bottom:5px;
}
.exception>.stacktrace {
line-height:1.2em;
color:#333;
display:none;
}
.exception>.stacktrace p {
font-size:.8em;
margin:0 0 0 5px;
}
.exception>.inner {
margin-left:20px;
display:none;
}
section.rendering-error {
color:#C00000;
font-size:.8em;
font-weight:700;
margin:10px;
}
h2.error-description {
font-size:1em;
text-align:center;
color:#462046;
}
section#error-page {
text-align:center;
padding:20px;
}
section#error-page img {
width:160px;
}
img#nomnom-standing {
vertical-align:middle;
}
section.logon-container p.login-required {
display:block;
margin-bottom:24px;
}
form.site-logon {
vertical-align:top;
}
form.site-logon input[type=submit] {
margin:0 auto;
}
form.provider-logon {
display:block;
margin-top:35px;
}
form.provider-logon a.logon-provider-button {
display:inline-block;
margin:4px;
}
form.provider-logon a.provider-icon {
background-image:url(/content/images/sprites/providers-small.png);
width:32px;
height:32px;
}
form.provider-logon a.provider-icon.google-icon {
background-position:0 0;
}
form.provider-logon a.provider-icon.fb-icon {
background-position:-32px 0;
}
form.provider-logon a.provider-icon.twitter-icon {
background-position:-64px 0;
}
form.provider-logon a.provider-icon.yahoo-icon {
background-position:-96px 0;
}
section.create-post {
width:90%;
max-width:300px;
padding-left:12px;
margin:0 auto;
}
section.posts>article,section.more-posts {
margin-top:20px;
}
section.posts>article:first-child {
margin-top:0;
}
section.posts>article>header {
font-size:1.5em;
font-weight:700;
text-align:left;
}
section.posts>article>a.post-thumbnail img {
max-height:125px;
max-width:40%;
float:left;
margin-top:8px;
margin-right:12px;
margin-bottom:12px;
}
section.posts>article>a.post-image img {
max-height:300px;
max-width:100%;
margin-top:8px;
}
section.posts>article>section {
font-size:.8em;
line-height:1.2em;
text-align:left;
}
section.posts>article>section.post-description {
margin-top:8px;
}
div#push,footer#footer,fieldset .field-validation-valid.model-validation,h1.error-title,section#error-page>section#server-room,section#error-page>aside#error-content,section#error-page>footer,img#servers,section.preview-container {
display:none;
}
.clear,section.posts>article {
clear:both;
}
.center,section.logon-container,form.site-logon p,form.provider-logon section.provider-buttons,section.posts,section.more-posts {
text-align:center;
}
ins,a,a.button:hover {
text-decoration:none;
}
a:hover,#noscript-notice a {
text-decoration:underline;
}
#media only screen andmin-width768px{
header#layout-header {
margin-bottom:30px;
}
#noscript-padding {
padding-bottom:22px;
}
div#push {
display:inherit;
height:72px;
}
footer#footer {
display:inherit;
margin-top:40px;
height:12px;
text-align:center;
font-size:.7em;
padding:10px 0;
}
section#layout-content {
position:relative;
}
nav#menu {
margin-top:0;
position:absolute;
top:16px;
right:3.125%;
max-width:45%;
}
nav#menu ol {
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
padding:5px;
}
a#menu-icon,nav#menu li.nav-top {
display:none;
}
nav#menu li {
display:inline-block;
}
nav#menu li a {
float:left;
border:none;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
border-bottom:inherit;
padding:0 10px;
}
header#layout-header h1 {
font-size:3.2em;
}
.exception {
margin-bottom:20px;
}
img#server {
padding-right:2px;
}
img#nomnom {
padding-left:4px;
}
section#error-page {
max-width:500px;
margin:0 auto;
}
section#error-page img {
width:200px;
}
section#error-page>img#notfound-sign,section#error-page>aside#error-content {
display:inline-block;
vertical-align:middle;
}
aside#error-content {
width:250px;
padding-left:30px;
border-left:1px solid #642D64;
margin-left:10px;
text-align:left;
}
aside#error-content header {
color:#642D64;
font-weight:700;
margin-bottom:20px;
}
aside#error-content p {
font-size:.9em;
line-height:1.3em;
margin-bottom:10px;
}
section#error-page>footer {
clear:both;
}
section#error-page>footer .apologies {
text-align:center;
padding-top:30px;
color:#642D64;
clear:left;
font-size:1.2em;
}
section#error-page>footer a {
text-align:center;
display:block;
padding-top:3px;
}
section.logon-container {
margin-top:3%;
}
form.site-logon {
display:inline-block;
margin-right:15px;
width:300px;
}
form.provider-logon {
padding-left:30px;
border-left:1px solid #ddd;
margin-top:0;
display:inline-block;
}
form.provider-logon a.provider-icon {
background-image:url(/content/images/sprites/providers-large.png);
width:100px;
height:60px;
}
form.provider-logon a.provider-icon.google-icon {
background-position:0 0;
}
form.provider-logon a.provider-icon.fb-icon {
background-position:-100px 0;
}
form.provider-logon a.provider-icon.twitter-icon {
background-position:-200px 0;
}
form.provider-logon a.provider-icon.yahoo-icon {
background-position:-300px 0;
}
form.provider-logon section.provider-buttons {
width:230px;
margin:0 auto;
}
section.create-post {
max-width:400px;
padding-left:20px;
}
section.posts {
min-width:700px;
max-width:900px;
margin:0 auto;
}
section.posts>article:first-child+article {
margin-top:0;
}
section.posts>article {
clear:none;
float:left;
width:45%;
}
section.posts>article.even {
margin-right:35px;
clear:both;
}
section.posts>article>a.post-thumbnail img {
max-height:200px;
max-width:50%;
}
section.posts>article>a.post-image img {
max-height:450px;
max-width:95%;
margin-top:16px;
}
.exception>.stacktrace,.exception>.inner,h1.error-title {
display:inherit;
}
}
#media only screen andmin-width1024px{
header#layout-header {
margin-bottom:40px;
}
nav#menu {
top:28px;
}
header#layout-header h1 {
font-size:4.6em;
}
section#error-page {
max-width:1200px;
}
section#error-page>section#server-room {
margin-right:20px;
display:inherit;
float:left;
}
section#error-page>section#server-room img {
width:180px;
}
section#error-page>footer {
display:inherit;
}
img#server {
vertical-align:middle;
}
img#nomnom {
vertical-align:bottom;
}
section#error-page>img#servers {
margin-right:20px;
display:inherit;
float:left;
width:40%;
}
section#error-page>img#nomnom-standing,section#error-page>aside#error-content {
margin-top:20px;
}
section.posts {
max-width:1000px;
}
section.posts>article,section.more-posts {
margin-top:32px;
}
section.posts>article.even {
margin-right:50px;
}
}
#media only screen\0{
#noscript-padding {
padding-bottom:67px;
}
}
#media only screen\0 andmin-width768px{
#noscript-padding {
padding-bottom:47px;
}
}
I'm using YuiCompressor,
but apparently it minifies media queries as:
#media only screen andmin-width768px{
How should I fix this?
Post here which decribes the same problem and the solution is to download the latest version of the compression software:
http://www.456bereastreet.com/archive/201012/yui_compressor_and_css_media_queries/