Final css

responsive.css

/* Mobile first queries */

@media (min-width: 240px) {.container { 
  max-width: 240px}
.container .column, .container .columns {
    float: none;
}
.post-title {
    font-size: 40px;
    font-size: 2rem;}
.site-header .site-bio {
    width: 15rem;}
}

@media (min-width: 320px) {.container { 
  max-width: 320px}
.container .column, .container .columns {
    float: none;
}}

@media only screen 
and (min-width: 360px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3.0) {.container { 
  max-width: 360px}
.container .column, .container .columns {
    float: none;
}}

/* Larger than phablet */
@media (min-width: 550px) {.container { 
  max-width: 550px}
.container .column, .container .columns {
    float: none;
}}

@media (min-width: 400px) {.container { 
  max-width: 400px}
.container .column, .container .columns {
    float: none;
}}

@media (min-width: 480px) {.container { 
  max-width: 480px}
.container .column, .container .columns {
    float: none;
}}

/* Larger than tablet */
@media (min-width: 750px) {.container { 
  max-width: 750px}
.container .column, .container .columns {
    float: none;
}}

/* Larger than desktop */
@media (min-width: 1000px) {.container { 
  max-width: 1000px}
.container .column, .container .columns {
    float: none;
}}

/* Larger than Desktop HD */
@media (min-width: 1200px) {.container { 
  max-width: 1200px}
.container .column, .container .columns {
    float: none;
}}