fiends. I am stucked in bootstrap grid.
As we know bootstap adds some margin to its .span *, so, I need to remove that margin for showing multiple span without adding any row.
I have generated my css from twitter bootstrap customized download. And I have st the gutter to 0 so that no margin should be added to span*.
But It is not working in responsive mode. Please help me to add responsive feature to below code:
.no-gutter.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.no-gutter.row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 0%;
}
.no-gutter.row-fluid .span12 {
width: 99.99999999999999%;
*width: 99.93055555555554%;
}
.no-gutter.row-fluid .span11 {
width: 91.66666666666666%;
*width: 91.59722222222221%;
}
.no-gutter.row-fluid .span10 {
width: 83.33333333333331%;
*width: 83.26388888888887%;
}
.no-gutter.row-fluid .span9 {
width: 74.99999999999999%;
*width: 74.93055555555554%;
}
.no-gutter.row-fluid .span8 {
width: 66.66666666666666%;
*width: 66.59722222222221%;
}
.no-gutter.row-fluid .span7 {
width: 58.33333333333333%;
*width: 58.263888888888886%;
}
.no-gutter.row-fluid .span6 {
width: 49.99999999999999%;
*width: 49.93055555555555%;
}
.no-gutter.row-fluid .span5 {
width: 41.66666666666666%;
*width: 41.597222222222214%;
}
.no-gutter.row-fluid .span4 {
width: 33.33333333333333%;
*width: 33.263888888888886%;
}
.no-gutter.row-fluid .span3 {
width: 24.999999999999996%;
*width: 24.930555555555554%;
}
.no-gutter.row-fluid .span2 {
width: 16.666666666666664%;
*width: 16.59722222222222%;
}
.no-gutter.row-fluid .span1 {
width: 8.333333333333332%;
*width: 8.263888888888888%;
}
.no-gutter.row-fluid .offset12 {
margin-left: 99.99999999999999%;
*margin-left: 99.8611111111111%;
}
.no-gutter.row-fluid .offset12:first-child {
margin-left: 99.99999999999999%;
*margin-left: 99.8611111111111%;
}
.no-gutter.row-fluid .offset11 {
margin-left: 91.66666666666666%;
*margin-left: 91.52777777777777%;
}
.no-gutter.row-fluid .offset11:first-child {
margin-left: 91.66666666666666%;
*margin-left: 91.52777777777777%;
}
.no-gutter.row-fluid .offset10 {
margin-left: 83.33333333333331%;
*margin-left: 83.19444444444443%;
}
.no-gutter.row-fluid .offset10:first-child {
margin-left: 83.33333333333331%;
*margin-left: 83.19444444444443%;
}
.no-gutter.row-fluid .offset9 {
margin-left: 74.99999999999999%;
*margin-left: 74.8611111111111%;
}
.no-gutter.row-fluid .offset9:first-child {
margin-left: 74.99999999999999%;
*margin-left: 74.8611111111111%;
}
.no-gutter.row-fluid .offset8 {
margin-left: 66.66666666666666%;
*margin-left: 66.52777777777777%;
}
.no-gutter.row-fluid .offset8:first-child {
margin-left: 66.66666666666666%;
*margin-left: 66.52777777777777%;
}
.no-gutter.row-fluid .offset7 {
margin-left: 58.33333333333333%;
*margin-left: 58.19444444444444%;
}
.no-gutter.row-fluid .offset7:first-child {
margin-left: 58.33333333333333%;
*margin-left: 58.19444444444444%;
}
.no-gutter.row-fluid .offset6 {
margin-left: 49.99999999999999%;
*margin-left: 49.86111111111111%;
}
.no-gutter.row-fluid .offset6:first-child {
margin-left: 49.99999999999999%;
*margin-left: 49.86111111111111%;
}
.no-gutter.row-fluid .offset5 {
margin-left: 41.66666666666666%;
*margin-left: 41.52777777777777%;
}
.no-gutter.row-fluid .offset5:first-child {
margin-left: 41.66666666666666%;
*margin-left: 41.52777777777777%;
}
.no-gutter.row-fluid .offset4 {
margin-left: 33.33333333333333%;
*margin-left: 33.19444444444444%;
}
.no-gutter.row-fluid .offset4:first-child {
margin-left: 33.33333333333333%;
*margin-left: 33.19444444444444%;
}
.no-gutter.row-fluid .offset3 {
margin-left: 24.999999999999996%;
*margin-left: 24.86111111111111%;
}
.no-gutter.row-fluid .offset3:first-child {
margin-left: 24.999999999999996%;
*margin-left: 24.86111111111111%;
}
.no-gutter.row-fluid .offset2 {
margin-left: 16.666666666666664%;
*margin-left: 16.52777777777778%;
}
.no-gutter.row-fluid .offset2:first-child {
margin-left: 16.666666666666664%;
*margin-left: 16.52777777777778%;
}
.no-gutter.row-fluid .offset1 {
margin-left: 8.333333333333332%;
*margin-left: 8.194444444444443%;
}
.no-gutter.row-fluid .offset1:first-child {
margin-left: 8.333333333333332%;
*margin-left: 8.194444444444443%;
}
Wouldn't you need to do...
.no-gutter.row-fluid [class*="span"] {
margin-left: 0;
}
Instead of just..
.no-gutter.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
Demo
Related
How can I change the default breakpoint values in primevue/primefaces ?
I mean setting values different than 576px for xs, 768px for md, 992px for lg etc.
A similar question has been asked here 3 years ago but no one answered.
After spending some time trying to come up with a solution, I've decided to go with this approach:
Import this css after you import your Primevue styles. Be sure to use
#media in the order it is provided below.
**
This will override Primevue's breakpoints
**
Lemme know if you found a better approach.
#media screen and (min-width: 0px){
.p-xs-1 {
width: 8.3333%;
}
.p-xs-2 {
width: 16.6667%;
}
.p-xs-3 {
width: 25%;
}
.p-xs-4 {
width: 33.3333%;
}
.p-xs-5 {
width: 41.6667%;
}
.p-xs-6 {
width: 50%;
}
.p-xs-7 {
width: 58.3333%;
}
.p-xs-8 {
width: 66.6667%;
}
.p-xs-9 {
width: 75%;
}
.p-xs-10 {
width: 83.3333%;
}
.p-xs-11 {
width: 91.6667%;
}
.p-xs-12 {
width: 100%;
}
}
#media screen and (min-width: 576px){
.p-sm-1 {
width: 8.3333%;
}
.p-sm-2 {
width: 16.6667%;
}
.p-sm-3 {
width: 25%;
}
.p-sm-4 {
width: 33.3333%;
}
.p-sm-5 {
width: 41.6667%;
}
.p-sm-6 {
width: 50%;
}
.p-sm-7 {
width: 58.3333%;
}
.p-sm-8 {
width: 66.6667%;
}
.p-sm-9 {
width: 75%;
}
.p-sm-10 {
width: 83.3333%;
}
.p-sm-11 {
width: 91.6667%;
}
.p-sm-12 {
width: 100%;
}
}
#media screen and (min-width: 992px){
.p-md-1 {
width: 8.3333%;
}
.p-md-2 {
width: 16.6667%;
}
.p-md-3 {
width: 25%;
}
.p-md-4 {
width: 33.3333%;
}
.p-md-5 {
width: 41.6667%;
}
.p-md-6 {
width: 50%;
}
.p-md-7 {
width: 58.3333%;
}
.p-md-8 {
width: 66.6667%;
}
.p-md-9 {
width: 75%;
}
.p-md-10 {
width: 83.3333%;
}
.p-md-11 {
width: 91.6667%;
}
.p-md-12 {
width: 100%;
}
}
#media screen and (min-width: 1200px){
.p-lg-1 {
width: 8.3333%;
}
.p-lg-2 {
width: 16.6667%;
}
.p-lg-3 {
width: 25%;
}
.p-lg-4 {
width: 33.3333%;
}
.p-lg-5 {
width: 41.6667%;
}
.p-lg-6 {
width: 50%;
}
.p-lg-7 {
width: 58.3333%;
}
.p-lg-8 {
width: 66.6667%;
}
.p-lg-9 {
width: 75%;
}
.p-lg-10 {
width: 83.3333%;
}
.p-lg-11 {
width: 91.6667%;
}
.p-lg-12 {
width: 100%;
}
}
#media screen and (min-width: 1600px){
.p-xl-1 {
width: 8.3333%;
}
.p-xl-2 {
width: 16.6667%;
}
.p-xl-3 {
width: 25%;
}
.p-xl-4 {
width: 33.3333%;
}
.p-xl-5 {
width: 41.6667%;
}
.p-xl-6 {
width: 50%;
}
.p-xl-7 {
width: 58.3333%;
}
.p-xl-8 {
width: 66.6667%;
}
.p-xl-9 {
width: 75%;
}
.p-xl-10 {
width: 83.3333%;
}
.p-xl-11 {
width: 91.6667%;
}
.p-xl-12 {
width: 100%;
}
}
#media screen and (min-width: 2000px){
.p-xxl-1 {
width: 8.3333%;
}
.p-xxl-2 {
width: 16.6667%;
}
.p-xxl-3 {
width: 25%;
}
.p-xxl-4 {
width: 33.3333%;
}
.p-xxl-5 {
width: 41.6667%;
}
.p-xxl-6 {
width: 50%;
}
.p-xxl-7 {
width: 58.3333%;
}
.p-xxl-8 {
width: 66.6667%;
}
.p-xxl-9 {
width: 75%;
}
.p-xxl-10 {
width: 83.3333%;
}
.p-xxl-11 {
width: 91.6667%;
}
.p-xxl-12 {
width: 100%;
}
}
I am Trying To Print The layout,The Layout design is below:**
For Example:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">Hi</div>
<div class="col-xs-12 col-sm-6 col-md-6">Css</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">Hi</div>
<div class="col-xs-12 col-sm-6 col-md-6">Css</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">Hi</div>
<div class="col-xs-12 col-sm-6 col-md-6">Css</div>
</div>
</div>
And My Print.CSS StyleSheet Is below:
#media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
.visible-xs {
display: none !important;
}
.hidden-xs {
display: block !important;
}
table.hidden-xs {
display: table;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
.hidden-xs.hidden-print {
display: none !important;
}
.hidden-sm {
display: none !important;
}
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
The Columns are stacked below one by one like:
HI
CSS
HI
CSS
HI
CSS
But I want To Get it Like:
HI CSS
HI CSS
HI CSS
Can Anyone Help Me on this Please.
This is the preview i am getting
You should use the CSS Media Query Print.
You can find the documentation here http://www.w3schools.com/css/css3_mediaqueries.asp
#media print {
…
}
I'm working on this website http://josedelavega.nowcommu.myhostpoint.ch
(Made using this Wordpress theme http://themeforest.net/item/orquidea-responsive-wordpress-theme/full_screen_preview/5120180)
On Desktop and tablet everything works great, but not on Smartphones (Samunsg Galaxy S6 in my case). The content looks like "blocked" or "hidden". If you check on Desktop first and than on Smartphone you can see the difference.
There is something wrong into the Media Queries?
#media (min-width: 1200px) {
}
#media (min-width: 980px) {
}
#media (max-width: 1000px) {
.cs-style-4 figcaption .descrtext {
display: none!important;
}
nav#topmenu {
display: none;
}
nav#mobilenav {
display: block;
}
.serviceslist,
.teamlist,
.plicetable {
margin-right: 15px;
}
.singleblog .textblock p {
margin-right: 15px;
margin-left: 15px;
}
.singleblog .slidergallery .sliderarrows .ltar {
margin-left: 15px;
}
.singleblog .slidergallery .sliderarrows .rgshare {
margin-right: 15px;
}
.leftpart {
margin-left: 15px;
width: 48%;
}
.rightpart {
margin-right: 15px;
width: 48%;
}
}
#media (max-width: 980px) {
.serviceslist .mobiledesc {
display: block;
}
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
display: none;
}
}
#media (max-width: 960px) {
}
#media (max-width: 780px) {
.blogarchive article.post {
margin-right: 5px;
}
.gallerypage .galleryitems .galitem .imagegally .mask2 .gallydate {
display: none;
}
.contacttop .leftpart {
width: 100%;
float: none;
margin-bottom: 20px;
}
.contacttop .rightpart {
width: 100%;
float: none;
}
.abouttwotop .leftpart {
width: 100%;
float: none;
margin-bottom: 20px;
}
.abouttwotop .rightpart {
width: 100%;
float: none;
}
.gallerypage .galleryitems .galitem,
.gallerypage .gallpbd .galitem {
width: 50%;
}
.singleblog .slidergallery .sliderbox {
height: 500px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 500px;
}
}
#media (max-width: 640px) {
.rightsidebar,
.leftsidebar {
display: none;
}
.rightsidebaron,
.leftsidebaron {
margin-right: 0;
margin-left: 0;
}
.wrapper .subtitle {
line-height: 26px;
}
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr {
height: auto;
}
#no-more-tables td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left;
height: auto;
padding-bottom: 20px;
padding-top: 10px;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before {
content: attr(data-title);
}
.singleblog .slidergallery .sliderbox {
height: 400px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 400px;
}
.serviceslist .titleservice {
font-size: 20px;
}
}
#media (max-width: 480px) {
header#top .logo {
width: 280px;
margin: 0 auto;
margin-top: 130px;
}
header#top .headertext {
width: 320px;
margin: 0 auto;
margin-top: 35px;
}
header#top a.gobot {
margin: 0 auto;
margin-top: 65px;
}
.teamlist li:nth-child(3n+3) {
margin: 0 auto;
margin-bottom: 40px!important;
}
.teamlist li {
max-width: 295px;
width: 100%;
float: none;
margin: 0 auto;
margin-bottom: 40px!important;
}
footer#footer-main p.copy {
display: block;
width: 100%;
text-align: center;
margin-bottom: 5px;
float: none;
}
footer#footer-main div.socialprof {
display: block;
width: 100%;
float: none;
text-align: center;
}
.blogarchive article.post {
width: 99%;
float: none;
}
.commentform section.comments {
width: 100%;
float: none;
margin-bottom: 30px;
}
.commentform section.respond {
width: 92%;
float: none;
}
.commentform section.comments .scrollbox {
width: 100%;
}
.contactleft,
.leftpart {
width: 90%;
margin-left: 15px;
float: none;
margin-bottom: 40px;
}
.contactright,
.rightpart {
width: 90%;
float: none;
margin-left: 15px;
}
.teamlist {
width: 90%;
overflow: hidden;
}
.wrapper {
overflow: hidden;
}
nav#mobilenav select {
width: 40%;
font-size: 16px;
}
.gallerypage .galleryitems .galitem,
.gallerypage .gallpbd .galitem {
width: 100%;
}
.opentime .timelineopening li {
float: none;
}
.opentime .timelineopening {
text-align: center;
}
.singleblog .slidergallery .sliderbox {
height: 300px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 300px;
}
.serviceslist .titleservice {
font-size: 18px;
}
}
#media (max-width: 380px) {
.singleblog .slidergallery .sliderbox {
height: 200px;
}
.singleblog .slidergallery .sliderbox img {
width: auto;
max-height: 200px;
}
.serviceslist .titleservice {
font-size: 16px;
}
}
You have to check your responsive css file queries it will be look like that:
#media only screen and (max-width: 767px) {
//your code
}
Just check it. Sometimes its given in theme's options to display content or hide them.
I would like to add the option of 5 equal columns added to my existing grid.
As far as I understand from a previous question on stackoverflow here I need to add the following line to a 960 grid:
.container .one-fifth.column { width: 137.6px; }
You can see in my sample below that my grid consists:
#Base 1200 Grid
#960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
What I need help with is what { width: ???px; } for a 1200 grid and what width for each of the media queries after adding the line .container .one-fifth.column
Any help would be greatly appreciated - Thanks in advance.
Existing Grid CSS:
/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/
/* Table of Contents
==================================================
#Base 1200 Grid
#960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
/* #Base 1200 Grid
================================================== */
.container { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column { width: 55px; }
.container .two.columns { width: 130px; }
.container .three.columns { width: 205px; }
.container .four.columns { width: 280px; }
.container .five.columns { width: 355px; }
.container .six.columns { width: 430px; }
.container .seven.columns { width: 505px; }
.container .eight.columns { width: 580px; }
.container .nine.columns { width: 655px; }
.container .ten.columns { width: 730px; }
.container .eleven.columns { width: 805px; }
.container .twelve.columns { width: 880px; }
.container .thirteen.columns { width: 955px; }
.container .fourteen.columns { width: 1030px; }
.container .fifteen.columns { width: 1105px; }
.container .sixteen.columns { width: 1180px; }
.container .one-third.column { width: 380px; }
.container .two-thirds.column { width: 400px; }
/* Offsets */
.container .offset-by-one { padding-left: 75px; }
.container .offset-by-two { padding-left: 150px; }
.container .offset-by-three { padding-left: 225px; }
.container .offset-by-four { padding-left: 300px; }
.container .offset-by-five { padding-left: 375px; }
.container .offset-by-six { padding-left: 450px; }
.container .offset-by-seven { padding-left: 525px; }
.container .offset-by-eight { padding-left: 600px; }
.container .offset-by-nine { padding-left: 675px; }
.container .offset-by-ten { padding-left: 750px; }
.container .offset-by-eleven { padding-left: 825px; }
.container .offset-by-twelve { padding-left: 900px; }
.container .offset-by-thirteen { padding-left: 975px; }
.container .offset-by-fourteen { padding-left: 1050px; }
.container .offset-by-fifteen { padding-left: 1125px; }
/* #960 Grid
================================================== */
/* Note: Design for a width of 960px */
#media only screen and (min-width: 960px) and (max-width: 1199px) {
.container {
position: relative;
width: 1200px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
}
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
}
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.container .one.column { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
.container .five.columns { width: 220px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
.container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 348px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; }
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
#media only screen and (max-width: 767px) {
.container { width: 300px; }
.columns, .column { margin: 0; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 300px; }
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
#media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
.columns, .column { margin: 0; }
.container .one.column,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 420px; }
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
For 1200 grid
.container .one-fifth.column { width: 220px; }
.container .two-fifths.column { width: 420px; }
.container .three-fifths.column { width: 640px; }
.container .four-fifths.column { width: 760px; }
For 960 grid
.container .one-fifth.column { width: 172px; }
.container .two-fifths.column { width: 364px; }
.container .three-fifths.column { width: 556px; }
.container .four-fifths.column { width: 748px; }
Tablet (Portrait)
.container .one-fifth.column { width: 133.6px; }
.container .two-fifths.column { width: 287.2px; }
.container .three-fifths.column { width: 440.8px; }
.container .four-fifths.column { width: 594.4px; }
Mobile (Portrait)
.container .one-fifth.column,
.container .two-fifths.column,
.container .three-fifths.column,
.container .four-fifths.column { width: 300px; }
I have a couple media queries in my stylesheet, each modifying some styles, but not others. I'm using the max-width query:
#media screen and (max-width: 1024px) {
#header .span6 { width: 60%; margin-left: 200px; }
#error .span6 { width: 60%; margin-left: 200px; }
#timer-block { width: 60%; margin-left: 200px;}
#timer { font-size: 5em; }
#start-pause { margin-left: 200px; }
.control { width: 297px; margin-top: 0; }
#footer { width: 60%; margin-left: 200px; }
}
#media screen and (max-width: 768px) {
#header .span6 { width: 80%; margin-left: 75px; }
#error .span6 { width: 80; margin-left: 75px; }
#timer-block { width: 80%; margin-left: 75px;}
#timer { font-size: 5em; }
#start-pause { margin-left: 75px; }
.control { width: 300px; margin-top: -5px; }
#footer { width: 80%; margin-left: 75px; }
}
#media screen and (max-width: 800px) {
#header .span6 { width: 80%; margin-left: 75px; }
h1 { font-size: 3.5em; margin-bottom: 0px;}
#error .span6 { width: 80%; margin-left: 75px; }
#timer-block { width: 80%; margin-left: 75px; }
#timer { font-size: 5em; }
.little { font-size: 0.5em; }
#start-pause { margin-left: 75px; }
.control { width: 312px; margin-top: -5px; }
#footer { width: 80%; margin-left: 75px; }
}
#media screen and (max-width: 600px) {
#header .span6 { width: 90%; margin-left: 25px; }
#error .span6 { width: 90%; margin-left: 30px; }
#timer-block { width: 90%; margin-left: 30px;}
#start-pause { margin-left: 30px; }
.control { width: 264px; margin-top: -5px; }
#footer { width: 90%; margin-left: 25px; }
}
#media screen and (max-width: 480px) {
#header { margin-top: -10px; }
#header .span6 { width: 90%; margin-left: 25px; }
h1 { font-size: 3em; margin-left: -15px; padding-left: 10px; }
#interval { width: 150px; height: 40px; font-size: 2em; margin-bottom: 20px; width: 150px; }
#error .span6 { width: 90%; margin-left: 25px; }
#timer-block { width: 90%; margin-left: 24px; height: 100px; padding: 10px; }
#start-pause { margin-left: 25px; }
.control { margin-top: -5px; width: 210px; }
#footer { width: 100%; margin-top: -20px; margin-left: 0; }
}
#media screen and (max-width: 320px) {
#timer-block { width: 90%; margin-left: 15px; padding: 10px; font-size: 0.8em; }
#header { margin-top: 0px; }
#header .span6 { margin-left: 37px; }
#interval { margin-top: -45px; margin-left: 20px; }
#error .span6 { width: 90%; margin-left: 15px; }
.control { width: 141px; margin-top: -10px; }
#start-pause { margin-left: 15px; }
#footer { width: 95%; margin-left: 10px; }
}
Is there a way I can change what I'm doing to make there be no collisions? This is the first time I use media queries so I may be missing something entirely.
Instead of
#media screen and (max-width: 480px)
You can use
#media screen and (max-width: 480px) and (min-width: 321px)
This way it will look only at screen sizes between 320 and 481;
instead of 0 and 481
Set a min width 1 pixel higher than the max width of the next query
Example
#media screen and (min-width: 769px) and (max-width: 1024px) {
#header .span6 { width: 60%; margin-left: 200px; }
#error .span6 { width: 60%; margin-left: 200px; }
#timer-block { width: 60%; margin-left: 200px;}
#timer { font-size: 5em; }
#start-pause { margin-left: 200px; }
.control { width: 297px; margin-top: 0; }
#footer { width: 60%; margin-left: 200px; }
}
I think you need to use min-width in this case to prevent collision, for example:
#media only screen and (min-width : 321px) and (max-width : 480px) {
/* Styles */
}