Media queries / css
/* ==========================================================================
Base Stylesheet - http://git.io/base
Author: Matthew Hartman - http://www.matthewhartman.com.au/
Version: 1.5 - Last Updated: 21st June, 2013
========================================================================== */
/* ==========================================================================
/* 2.0 - Grid Layout (Responsive)
==========================================================================
*/
/* Sections & Content Blocks */
.section {
position: relative;
z-index: -10;
}
/* Rows */
.row {
margin: 0 0 0 244px;
}
.row-one {
margin: 0;
}
.row-two {
padding: 5px 12px;
}
.row-three {
margin: 3em 0;
}
.center {
margin-left: auto;
margin-right: auto;
}
.container {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
.container-full {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
/* Fluid Grid */
.col {
margin-left: 0;
float: left;
}
.col:first-child {
margin-left: 0;
}
/* Columns */
.one {
width: 6.5%;
width:
expression(Math.floor(0.065*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.two {
width: 15%;
width:
expression(Math.floor(0.15*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.three {
width: 23.5%;
width:
expression(Math.floor(0.235*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.four {
width: 32.5%;
width:
expression(Math.floor(0.32*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.five {
width: 40.5%;
width:
expression(Math.floor(0.40.5*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.six {
width: 49%;
width:
expression(Math.floor(0.49*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.seven {
width: 57.5%;
width:
expression(Math.floor(0.575*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.eight {
width: 66%;
width:
expression(Math.floor(0.66*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.nine {
width: 74.5%;
width:
expression(Math.floor(0.745*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.ten {
width: 83%;
width:
expression(Math.floor(0.83*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.eleven {
width: 91.5%;
width:
expression(Math.floor(0.915*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.twelve {
width: 100%;
}
.quarter {
width: 23.5%;
width:
expression(Math.floor(0.235*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.half {
width: 49%;
width:
expression(Math.floor(0.49*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
.one-third {
width: 32%;
width:
expression(Math.floor(0.32*(this.parentNode.offsetWidth-parseFloat(this.parentNode.currentStyle.paddingLeft)
0 parseFloat(this.parentNode.currentStyle.paddingRight))) 0 px);
}
/* ==========================================================================
/* -- Tablet Devices (Layout, Modifications, etc)
==========================================================================
*/
@media only screen and min-width 768px and max-width 979px {
#single-full-column {
padding: 12px 0 0;
}
#full-column {
padding: 12px 0 0;
}
.m-container {
display: none;
}
.container,.tablet-container {
width: 720px;
padding-left: 10px;
padding-right: 10px;
}
/* Tablet Grid
* For stacking full width columns, please use the new class
.tablet-full */
#wrapper {
width: 740px;
}
#aside {
padding: 0;
}
#header {
padding: 12px 0 0;
margin: 0 12px 0 0;
}
.row {
padding: 0 18px;
}
.row-one {
margin: 0 -18px;
}
#search form button,#widget_search form button {
margin-left: 6px;
}
#posts,#post-single {
padding: 12px 0 0;
width: 100%;
}
#footer > div > :nth-child(2):before {
background: none;
}
#footer > div > :nth-child(3):after {
background: none;
}
.tablet-one {
width: 6.5%;
}
.tablet-two {
width: 15%;
}
.tablet-three {
width: 23.5%;
}
#sidebar.tablet-four {
margin: 0 0 0 12px;
}
.tablet-four {
width: 32%;
}
.tablet-five {
width: 40.5%;
}
.tablet-six {
width: 49%;
}
.tablet-seven {
width: 57.5%;
}
.tablet-eight {
width: 66%;
}
.tablet-nine {
width: 74.5%;
}
.tablet-ten {
width: 83%;
}
.tablet-eleven {
width: 91.5%;
}
.tablet-twelve {
width: 100%;
}
.tablet-full {
clear: both;
width: 100%;
margin: 0;
display: block;
}
.tablet-full:first-child {
margin-top: 0;
}
.tablet-center {
margin-left: auto;
margin-right: auto;
float: none;
}
.tablet-center:first-child {
margin-left: auto;
}
.tablet-center-text {
text-align: center;
}
.tablet-left {
float: left;
}
.tablet-right {
float: right;
}
.tablet-no-float {
float: none;
}
.no-tablet {
display: none;
}
.show-tablet {
display: block;
}
}
/* End Tablet Media Query */
/* ==========================================================================
/* -- Mobile Devices (Layout, Modifications, etc)
==========================================================================
*/
@media only screen and max-width 767px {
/* Mobile Grid
* For stacking full width columns, please use the new class
.mobile-full */
nav,object,#hide-menu-bg {
display: none;
}
section:after {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 3px;
content: '';
background: 0 0 rgba(226,224,211,0) 100%;
/* FF3.6+ */
background: 0 color-stop(100%,rgba(226,224,211,0)));
/* Chrome,Safari4+ */
background: 0 0 100%;
/* Chrome10+,Safari5.1+ */
background: 0 0 100%;
/* Opera 11.10+ */
background: 0 0 100%;
/* IE10+ */
background: linear-gradient(tobottom,rgba(165,163,157,1) 0 100%;
/* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5a39d',endColorstr='#00e2e0d3',GradientType=0);
/* IE6-9 */
}
section:before {
position: absolute;
right: 0;
top: -6px;
width: 100%;
content: '';
height: 5px;
background:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAYAAACEhIafAAAAHklEQVQImWM4f+7Qf4Y9uzb+Z/j4/tF/hqePr0MIANUbEYIYiHfUAAAAAElFTkSuQmCC)
repeat-x;
background-size: 100% 100%;
}
#single-full-column {
padding: 12px 0 0;
}
.m-container a {
text-decoration: none;
}
.m-container {
display: block;
width: 100%;
border-bottom: 1px solid #c5c3b9;
}
.toggleMenu:before {
position: absolute;
left: 20px;
width: 16px;
height: 16px;
content: '';
background:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAALElEQVQ4T2Nsc3f/z0ABYBwGBlDgfbBWRooNGAaBSLEXKA5Eig2g2AtD3wAAmwkY9YS+5GAAAAAASUVORK5CYII=);
}
.toggleMenu {
display: block;
background: #ccc9bf;
/* Old browsers */
background: 0 50% rgba(226,224,211,1) 100%;
/* FF3.6+ */
background: 0 color-stop(100%,rgba(226,224,211,1)));
/* Chrome,Safari4+ */
background: 0 50% 100%;
/* Chrome10+,Safari5.1+ */
background: 0 50% 100%;
/* Opera 11.10+ */
background: 0 50% 100%;
/* IE10+ */
background: linear-gradient(tobottom,rgba(204,201,191,1) 50% 100%;
/* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc9bf',endColorstr='#e2e0d3',GradientType=0);
/* IE6-9 */
color: #864747;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 700;
padding: 15px 50px;
z-index: 1000;
}
.nav {
list-style: none;
zoom: 1;
background: #d2d0c4;
}
.nav a {
padding: 10px 15px;
color: #444;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 700;
text-shadow: 0 0 4px rgba(255,253,240,1);
}
.nav li {
position: relative;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav li li a {
display: block;
background: #c2c0b4;
position: relative;
border-bottom: 1px solid #d2d0c4;
padding-left: 25px;
}
.nav li a:after {
position: absolute;
width: 100%;
height: 1px;
content: '';
top: -2px;
left: 0;
background: #bcbab1;
}
.nav li li li a {
background: #249578;
border-top: 1px solid #e0ded1;
}
.active {
display: block;
}
.nav > li {
border-top: 1px solid #e0ded1;
}
.nav > li > .parent {
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAAL0lEQVQIW2P88O7BfwYCgBEkj0+hgJACI1gRLoUgBSA5uCJ0hTAFGIpgCpEVgMQAnLoTwwELjzIAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav li li .parent {
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAAL0lEQVQIW2P88O7BfwYCgBEkj0+hgJACI1gRLoUgBSA5uCJ0hTAFGIpgCpEVgMQAnLoTwwELjzIAAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
list-style: none;
display: block;
width: 100%;
}
.nav > li.hover > ul,.nav li li.hover ul {
position: static;
}
#wrapper {
width: 100%;
}
#lr-form-bg form input {
width: 100%;
}
.reply-gradient {
width: 100%;
background: none;
}
.row {
margin-left: 0 !important;
padding: 0 18px;
}
.row-one {
margin: 0 -18px;
}
#aside {
padding: 12px 0 0;
}
#header {
padding: 12px 0 0;
margin: 0 12px 0 0;
}
#posts,#post-single {
padding: 12px 0 0;
width: 100%;
}
#footer > div > :nth-child(2):before {
background: none;
}
#footer > div > :nth-child(3):after {
background: none;
}
#footer-center {
padding-top: 30px;
}
#footer-right {
padding-top: 30px;
}
.mobile-one {
width: 6.5%;
}
.mobile-two {
width: 15%;
}
.mobile-three {
width: 23.5%;
}
.mobile-four {
width: 32%;
}
.mobile-five {
width: 40.5%;
}
.mobile-six {
width: 49%;
}
.mobile-seven {
width: 57.5%;
}
.mobile-eight {
width: 66%;
}
.mobile-nine {
width: 74.5%;
}
.mobile-ten {
width: 83%;
}
.mobile-eleven {
width: 91.5%;
}
.mobile-twelve {
width: 100%;
}
.mobile-full {
clear: both;
width: 100%;
margin: 0;
display: block;
}
.mobile-full:first-child {
margin-top: 0;
}
.mobile-center {
margin-left: auto;
margin-right: auto;
float: none;
}
.mobile-center:first-child {
margin-left: auto;
}
.mobile-center-text {
text-align: center;
}
.mobile-left {
float: left;
}
.mobile-right {
float: right;
}
.mobile-no-float {
float: none;
}
.container,.mobile-container {
padding-left: 20px;
padding-right: 20px;
}
/* Mobile Tables */
table th,table td {
padding: 4px;
}
.no-mobile {
display: none;
}
.show-mobile {
display: block;
}
}
/* End Mobile Media Query */
/* ==========================================================================
/* -- Mobile Devices (Layout, Modifications, etc)
==========================================================================
*/
@media only screen and max-width 480px {
#commentform > input {
width: 100%;
}
.comment-reply-link {
right: 6px;
}
#main-content {
padding: 0;
}
.author,.calendar-single {
float: none;
text-align: center;
display: block;
}
.divider-single-b {
margin-top: 2px;
}
.avatar-area {
display: none;
}
.comment-content {
margin-left: 0;
}
.comment-text {
margin-right: 0;
}
.comment-content:before {
background: none;
}
#search form input,#widget_search form input {
width: 70%;
}
}
I have some problems, i don't know why my responsive layout doesn't work
with mobile browsers. It looks like they are ignoring media queries. Did i
forget about something ? I was testing it on few devices with freshly
downloaded browsers.
Thx in advance !
No comments:
Post a Comment