* { //margin: 0; box-sizing: border-box; } body { font-family: "Helvetica Neue"; font-weight: 200; background-color: #ddd; } .grid { padding: 0.5em; max-width: 968px; min-width: 300px; //position: relative; margin: 0 auto; background-color: white; } $width = 2px; .grid header { width: 100%; font-weight: 400; margin-bottom: 4px; .day { background-color: #333; color: #ddd; //outline: 2px solid white; } } .grid section, .grid header { margin: 0 0 0.5%; padding: 0; } /*.grid header::nth-child(odd) { margin-right: 5px; }*/ .day { background-color: #ebebeb; //background-color: #e6e6e6; //display: inline-block; float: left; width: 18px; width: 13.8571%; //width: calc('14.2857% - #{$width}'); //width: calc('(100% - #{6 * $width}) / 7'); padding: 1.8em 0 2em; margin: 0; text-align: center; //border-bottom: 2px solid white; position: relative; //margin-right: $width; margin-right: 0.5%; &:last-child { margin-right: 0; } } .events { //padding: 1.25em 0; //color: #278ed3; font-weight: 400; } .event-number { position: absolute; left: 0; right: 0; line-height: 0.5; } .event-bullet { display: none; position: absolute; left: 0; right: 0; line-height: 0.5; } .day.events div { //text-decoration: underline; } section .day { //outline-right: 2px solid white; //outline: 2px solid white; } .grid .day:empty { border: none; background-color: rgba(0,0,0,0); //outline: none; } .clearfix{ *zoom:1; } .clearfix:before,.clearfix:after{ display:table; content:" "; //line-height:0; } .clearfix:after{ clear:both; } @media all and (max-width: 600px) { .events .event-number { display: none; } .events .event-bullet { display: block; } .days { padding: 1.8em 0; } body { //background-color: purple; } } @media all and (max-width: 480px) and (min-width: 320px) { body { //background-color: red; } .day.events, .day { padding: 1.2em 0; } } @media all and (max-width: 320px) { body { //background-color: blue; } .day.events { padding: 0.75em 0; } .event-bullet { line-height: 0.5; } .grid .day { padding: 1em 0; } }