Responsive grid, how to add margin between columns? - responsive-design
I'm watching course about html & css and use modified responsive grid from here:
http://www.responsivegridsystem.com/calculator/
If browser width decreases, divs go to new lines and finally are shown in one column. It works, but
cannot add horizontal spacing between elements:
jsfiddle
index.html
<!-- FIRST ROW -->
<div class="row">
<div class="col span-1-of-2 box">
<h3>first-row span-1</h3>
</div>
<div class="col span-1-of-2 box">
<h3>first-row span-2</h3>
</div>
</div>
<!-- SECOND ROW -->
<div class="row">
<div class="col span-1-of-4 box">
<h3>second-row span-1</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We
work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="col span-1-of-4 box">
<h3>second-row span-2</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We
work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="col span-1-of-4 box">
<h3>second-row span-3</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We
work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="col span-1-of-4 box">
<h3>second-row span-4</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We
work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
</div>
Media.css
/* small phones to small tyablets 481 to 767 */
#media only screen and (max-width: 767px) {
.col { margin: 1% 0 1% 0%; }
.span-1-of-2 { width: 98%; padding-right: 1%;}
.span-1-of-4, .span-2-of-4, .span-3-of-4, .span-4-of-4 { width: 45%; }
}
/* small phones 0 to 480 */
#media only screen and (max-width: 480px) {
.col { margin: 1% 1% 1% 1%; }
.span-1-of-4, .span-2-of-4, .span-3-of-4, .span-4-of-4 { width: 100%; }
}
styles.css
/* -------- REUSABLE COMPONENETS -------- */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.clearfix {zoom: 1;}
.clearfix:after {
content: ' ';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* row class from grid css */
.row {
width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
/* class to modify out-of-the-box grid classes (like 'span-1-of-4') */
.box {
background-color: #1ba1e2;
border: 1px solid gray;
}
grid.css
/* SECTIONS ============================================================================= */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* GROUPING ============================================================================= */
.row {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.row:before,
.row:after {
content:"";
display:table;
}
.row:after {
clear:both;
}
/* GRID COLUMN SETUP ==================================================================== */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
#media only screen and (max-width: 480px) {
.col {
/*margin: 1% 0 1% 0%;*/
margin: 0;
}
}
/* GRID OF TWO ============================================================================= */
.span-2-of-2 {
width: 100%;
}
.span-1-of-2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-2-of-2 {
width: 100%;
}
.span-1-of-2 {
width: 100%;
}
}
/* GRID OF THREE ============================================================================= */
.span-3-of-3 {
width: 100%;
}
.span-2-of-3 {
width: 66.13%;
}
.span-1-of-3 {
width: 32.26%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-3-of-3 {
width: 100%;
}
.span-2-of-3 {
width: 100%;
}
.span-1-of-3 {
width: 100%;
}
}
/* GRID OF FOUR ============================================================================= */
.span-4-of-4 {
width: 100%;
}
.span-3-of-4 {
width: 74.6%;
}
.span-2-of-4 {
width: 49.2%;
}
.span-1-of-4 {
width: 23.8%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-4-of-4 {
width: 100%;
}
.span-3-of-4 {
width: 100%;
}
.span-2-of-4 {
width: 100%;
}
.span-1-of-4 {
width: 100%;
}
}
/* GRID OF FIVE ============================================================================= */
.span-5-of-5 {
width: 100%;
}
.span-4-of-5 {
width: 79.68%;
}
.span-3-of-5 {
width: 59.36%;
}
.span-2-of-5 {
width: 39.04%;
}
.span-1-of-5 {
width: 18.72%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-5-of-5 {
width: 100%;
}
.span-4-of-5 {
width: 100%;
}
.span-3-of-5 {
width: 100%;
}
.span-2-of-5 {
width: 100%;
}
.span-1-of-5 {
width: 100%;
}
}
/* GRID OF SIX ============================================================================= */
.span-6-of-6 {
width: 100%;
}
.span-5-of-6 {
width: 83.06%;
}
.span-4-of-6 {
width: 66.13%;
}
.span-3-of-6 {
width: 49.2%;
}
.span-2-of-6 {
width: 32.26%;
}
.span-1-of-6 {
width: 15.33%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-6-of-6 {
width: 100%;
}
.span-5-of-6 {
width: 100%;
}
.span-4-of-6 {
width: 100%;
}
.span-3-of-6 {
width: 100%;
}
.span-2-of-6 {
width: 100%;
}
.span-1-of-6 {
width: 100%;
}
}
/* GRID OF SEVEN ============================================================================= */
.span-7-of-7 {
width: 100%;
}
.span-6-of-7 {
width: 85.48%;
}
.span-5-of-7 {
width: 70.97%;
}
.span-4-of-7 {
width: 56.45%;
}
.span-3-of-7 {
width: 41.94%;
}
.span-2-of-7 {
width: 27.42%;
}
.span-1-of-7 {
width: 12.91%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-7-of-7 {
width: 100%;
}
.span-6-of-7 {
width: 100%;
}
.span-5-of-7 {
width: 100%;
}
.span-4-of-7 {
width: 100%;
}
.span-3-of-7 {
width: 100%;
}
.span-2-of-7 {
width: 100%;
}
.span-1-of-7 {
width: 100%;
}
}
/* GRID OF EIGHT ============================================================================= */
.span-8-of-8 {
width: 100%;
}
.span-7-of-8 {
width: 87.3%;
}
.span-6-of-8 {
width: 74.6%;
}
.span-5-of-8 {
width: 61.9%;
}
.span-4-of-8 {
width: 49.2%;
}
.span-3-of-8 {
width: 36.5%;
}
.span-2-of-8 {
width: 23.8%;
}
.span-1-of-8 {
width: 11.1%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-8-of-8 {
width: 100%;
}
.span-7-of-8 {
width: 100%;
}
.span-6-of-8 {
width: 100%;
}
.span-5-of-8 {
width: 100%;
}
.span-4-of-8 {
width: 100%;
}
.span-3-of-8 {
width: 100%;
}
.span-2-of-8 {
width: 100%;
}
.span-1-of-8 {
width: 100%;
}
}
/* GRID OF NINE ============================================================================= */
.span-9-of-9 {
width: 100%;
}
.span-8-of-9 {
width: 88.71%;
}
.span-7-of-9 {
width: 77.42%;
}
.span-6-of-9 {
width: 66.13%;
}
.span-5-of-9 {
width: 54.84%;
}
.span-4-of-9 {
width: 43.55%;
}
.span-3-of-9 {
width: 32.26%;
}
.span-2-of-9 {
width: 20.97%;
}
.span-1-of-9 {
width: 9.68%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-9-of-9 {
width: 100%;
}
.span-8-of-9 {
width: 100%;
}
.span-7-of-9 {
width: 100%;
}
.span-6-of-9 {
width: 100%;
}
.span-5-of-9 {
width: 100%;
}
.span-4-of-9 {
width: 100%;
}
.span-3-of-9 {
width: 100%;
}
.span-2-of-9 {
width: 100%;
}
.span-1-of-9 {
width: 100%;
}
}
/* GRID OF TEN ============================================================================= */
.span-10-of-10 {
width: 100%;
}
.span-9-of-10 {
width: 89.84%;
}
.span-8-of-10 {
width: 79.68%;
}
.span-7-of-10 {
width: 69.52%;
}
.span-6-of-10 {
width: 59.36%;
}
.span-5-of-10 {
width: 49.2%;
}
.span-4-of-10 {
width: 39.04%;
}
.span-3-of-10 {
width: 28.88%;
}
.span-2-of-10 {
width: 18.72%;
}
.span-1-of-10 {
width: 8.56%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-10-of-10 {
width: 100%;
}
.span-9-of-10 {
width: 100%;
}
.span-8-of-10 {
width: 100%;
}
.span-7-of-10 {
width: 100%;
}
.span-6-of-10 {
width: 100%;
}
.span-5-of-10 {
width: 100%;
}
.span-4-of-10 {
width: 100%;
}
.span-3-of-10 {
width: 100%;
}
.span-2-of-10 {
width: 100%;
}
.span-1-of-10 {
width: 100%;
}
}
/* GRID OF ELEVEN ============================================================================= */
.span-11-of-11 {
width: 100%;
}
.span-10-of-11 {
width: 90.76%;
}
.span-9-of-11 {
width: 81.52%;
}
.span-8-of-11 {
width: 72.29%;
}
.span-7-of-11 {
width: 63.05%;
}
.span-6-of-11 {
width: 53.81%;
}
.span-5-of-11 {
width: 44.58%;
}
.span-4-of-11 {
width: 35.34%;
}
.span-3-of-11 {
width: 26.1%;
}
.span-2-of-11 {
width: 16.87%;
}
.span-1-of-11 {
width: 7.63%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-11-of-11 {
width: 100%;
}
.span-10-of-11 {
width: 100%;
}
.span-9-of-11 {
width: 100%;
}
.span-8-of-11 {
width: 100%;
}
.span-7-of-11 {
width: 100%;
}
.span-6-of-11 {
width: 100%;
}
.span-5-of-11 {
width: 100%;
}
.span-4-of-11 {
width: 100%;
}
.span-3-of-11 {
width: 100%;
}
.span-2-of-11 {
width: 100%;
}
.span-1-of-11 {
width: 100%;
}
}
/* GRID OF TWELVE ============================================================================= */
.span-12-of-12 {
width: 100%;
}
.span-11-of-12 {
width: 91.53%;
}
.span-10-of-12 {
width: 83.06%;
}
.span-9-of-12 {
width: 74.6%;
}
.span-8-of-12 {
width: 66.13%;
}
.span-7-of-12 {
width: 57.66%;
}
.span-6-of-12 {
width: 49.2%;
}
.span-5-of-12 {
width: 40.73%;
}
.span-4-of-12 {
width: 32.26%;
}
.span-3-of-12 {
width: 23.8%;
}
.span-2-of-12 {
width: 15.33%;
}
.span-1-of-12 {
width: 6.86%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-12-of-12 {
width: 100%;
}
.span-11-of-12 {
width: 100%;
}
.span-10-of-12 {
width: 100%;
}
.span-9-of-12 {
width: 100%;
}
.span-8-of-12 {
width: 100%;
}
.span-7-of-12 {
width: 100%;
}
.span-6-of-12 {
width: 100%;
}
.span-5-of-12 {
width: 100%;
}
.span-4-of-12 {
width: 100%;
}
.span-3-of-12 {
width: 100%;
}
.span-2-of-12 {
width: 100%;
}
.span-1-of-12 {
width: 100%;
}
}
I'll attach folder with example, which could be opened in HTML Editor
https://mega.nz/#!fh0zSLQR!sNWr7joNedcOPfmEb9BwCAZdTncizAfm9EsQ7ITh8Zk
I made some changes in your custom grid css.
Updated fiddle: https://jsfiddle.net/t0g0chrh/3/
/* SECTIONS ============================================================================= */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* GROUPING ============================================================================= */
.row {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.row:before,
.row:after {
content:"";
display:table;
}
.row:after {
clear:both;
}
/* GRID COLUMN SETUP ==================================================================== */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
#media only screen and (max-width: 480px) {
.col {
/*margin: 1% 0 1% 0%;*/
margin: 0;
}
}
/* GRID OF TWO ============================================================================= */
.span-2-of-2 {
width: 100%;
}
.span-1-of-2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-2-of-2 {
width: 100%;
}
.span-1-of-2 {
width: 100%;
}
}
/* GRID OF THREE ============================================================================= */
.span-3-of-3 {
width: 100%;
}
.span-2-of-3 {
width: 66.13%;
}
.span-1-of-3 {
width: 32.26%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-3-of-3 {
width: 100%;
}
.span-2-of-3 {
width: 100%;
}
.span-1-of-3 {
width: 100%;
}
}
/* GRID OF FOUR ============================================================================= */
.span-4-of-4 {
width: 100%;
}
.span-3-of-4 {
width: 74.6%;
}
.span-2-of-4 {
width: 49.2%;
}
.span-1-of-4 {
width: 23.8%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-4-of-4 {
width: 100%;
}
.span-3-of-4 {
width: 100%;
}
.span-2-of-4 {
width: 100%;
}
.span-1-of-4 {
width: 100%;
}
}
/* GRID OF FIVE ============================================================================= */
.span-5-of-5 {
width: 100%;
}
.span-4-of-5 {
width: 79.68%;
}
.span-3-of-5 {
width: 59.36%;
}
.span-2-of-5 {
width: 39.04%;
}
.span-1-of-5 {
width: 18.72%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-5-of-5 {
width: 100%;
}
.span-4-of-5 {
width: 100%;
}
.span-3-of-5 {
width: 100%;
}
.span-2-of-5 {
width: 100%;
}
.span-1-of-5 {
width: 100%;
}
}
/* GRID OF SIX ============================================================================= */
.span-6-of-6 {
width: 100%;
}
.span-5-of-6 {
width: 83.06%;
}
.span-4-of-6 {
width: 66.13%;
}
.span-3-of-6 {
width: 49.2%;
}
.span-2-of-6 {
width: 32.26%;
}
.span-1-of-6 {
width: 15.33%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-6-of-6 {
width: 100%;
}
.span-5-of-6 {
width: 100%;
}
.span-4-of-6 {
width: 100%;
}
.span-3-of-6 {
width: 100%;
}
.span-2-of-6 {
width: 100%;
}
.span-1-of-6 {
width: 100%;
}
}
/* GRID OF SEVEN ============================================================================= */
.span-7-of-7 {
width: 100%;
}
.span-6-of-7 {
width: 85.48%;
}
.span-5-of-7 {
width: 70.97%;
}
.span-4-of-7 {
width: 56.45%;
}
.span-3-of-7 {
width: 41.94%;
}
.span-2-of-7 {
width: 27.42%;
}
.span-1-of-7 {
width: 12.91%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-7-of-7 {
width: 100%;
}
.span-6-of-7 {
width: 100%;
}
.span-5-of-7 {
width: 100%;
}
.span-4-of-7 {
width: 100%;
}
.span-3-of-7 {
width: 100%;
}
.span-2-of-7 {
width: 100%;
}
.span-1-of-7 {
width: 100%;
}
}
/* GRID OF EIGHT ============================================================================= */
.span-8-of-8 {
width: 100%;
}
.span-7-of-8 {
width: 87.3%;
}
.span-6-of-8 {
width: 74.6%;
}
.span-5-of-8 {
width: 61.9%;
}
.span-4-of-8 {
width: 49.2%;
}
.span-3-of-8 {
width: 36.5%;
}
.span-2-of-8 {
width: 23.8%;
}
.span-1-of-8 {
width: 11.1%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-8-of-8 {
width: 100%;
}
.span-7-of-8 {
width: 100%;
}
.span-6-of-8 {
width: 100%;
}
.span-5-of-8 {
width: 100%;
}
.span-4-of-8 {
width: 100%;
}
.span-3-of-8 {
width: 100%;
}
.span-2-of-8 {
width: 100%;
}
.span-1-of-8 {
width: 100%;
}
}
/* GRID OF NINE ============================================================================= */
.span-9-of-9 {
width: 100%;
}
.span-8-of-9 {
width: 88.71%;
}
.span-7-of-9 {
width: 77.42%;
}
.span-6-of-9 {
width: 66.13%;
}
.span-5-of-9 {
width: 54.84%;
}
.span-4-of-9 {
width: 43.55%;
}
.span-3-of-9 {
width: 32.26%;
}
.span-2-of-9 {
width: 20.97%;
}
.span-1-of-9 {
width: 9.68%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-9-of-9 {
width: 100%;
}
.span-8-of-9 {
width: 100%;
}
.span-7-of-9 {
width: 100%;
}
.span-6-of-9 {
width: 100%;
}
.span-5-of-9 {
width: 100%;
}
.span-4-of-9 {
width: 100%;
}
.span-3-of-9 {
width: 100%;
}
.span-2-of-9 {
width: 100%;
}
.span-1-of-9 {
width: 100%;
}
}
/* GRID OF TEN ============================================================================= */
.span-10-of-10 {
width: 100%;
}
.span-9-of-10 {
width: 89.84%;
}
.span-8-of-10 {
width: 79.68%;
}
.span-7-of-10 {
width: 69.52%;
}
.span-6-of-10 {
width: 59.36%;
}
.span-5-of-10 {
width: 49.2%;
}
.span-4-of-10 {
width: 39.04%;
}
.span-3-of-10 {
width: 28.88%;
}
.span-2-of-10 {
width: 18.72%;
}
.span-1-of-10 {
width: 8.56%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-10-of-10 {
width: 100%;
}
.span-9-of-10 {
width: 100%;
}
.span-8-of-10 {
width: 100%;
}
.span-7-of-10 {
width: 100%;
}
.span-6-of-10 {
width: 100%;
}
.span-5-of-10 {
width: 100%;
}
.span-4-of-10 {
width: 100%;
}
.span-3-of-10 {
width: 100%;
}
.span-2-of-10 {
width: 100%;
}
.span-1-of-10 {
width: 100%;
}
}
/* GRID OF ELEVEN ============================================================================= */
.span-11-of-11 {
width: 100%;
}
.span-10-of-11 {
width: 90.76%;
}
.span-9-of-11 {
width: 81.52%;
}
.span-8-of-11 {
width: 72.29%;
}
.span-7-of-11 {
width: 63.05%;
}
.span-6-of-11 {
width: 53.81%;
}
.span-5-of-11 {
width: 44.58%;
}
.span-4-of-11 {
width: 35.34%;
}
.span-3-of-11 {
width: 26.1%;
}
.span-2-of-11 {
width: 16.87%;
}
.span-1-of-11 {
width: 7.63%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-11-of-11 {
width: 100%;
}
.span-10-of-11 {
width: 100%;
}
.span-9-of-11 {
width: 100%;
}
.span-8-of-11 {
width: 100%;
}
.span-7-of-11 {
width: 100%;
}
.span-6-of-11 {
width: 100%;
}
.span-5-of-11 {
width: 100%;
}
.span-4-of-11 {
width: 100%;
}
.span-3-of-11 {
width: 100%;
}
.span-2-of-11 {
width: 100%;
}
.span-1-of-11 {
width: 100%;
}
}
/* GRID OF TWELVE ============================================================================= */
.span-12-of-12 {
width: 100%;
}
.span-11-of-12 {
width: 91.53%;
}
.span-10-of-12 {
width: 83.06%;
}
.span-9-of-12 {
width: 74.6%;
}
.span-8-of-12 {
width: 66.13%;
}
.span-7-of-12 {
width: 57.66%;
}
.span-6-of-12 {
width: 49.2%;
}
.span-5-of-12 {
width: 40.73%;
}
.span-4-of-12 {
width: 32.26%;
}
.span-3-of-12 {
width: 23.8%;
}
.span-2-of-12 {
width: 15.33%;
}
.span-1-of-12 {
width: 6.86%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span-12-of-12 {
width: 100%;
}
.span-11-of-12 {
width: 100%;
}
.span-10-of-12 {
width: 100%;
}
.span-9-of-12 {
width: 100%;
}
.span-8-of-12 {
width: 100%;
}
.span-7-of-12 {
width: 100%;
}
.span-6-of-12 {
width: 100%;
}
.span-5-of-12 {
width: 100%;
}
.span-4-of-12 {
width: 100%;
}
.span-3-of-12 {
width: 100%;
}
.span-2-of-12 {
width: 100%;
}
.span-1-of-12 {
width: 100%;
}
}
/* MEDIA.CSS*/
/* small phones to small tyablets 481 to 767 */
#media only screen and (max-width: 767px) {
.col { margin: 1% 0 1% 0%; }
.span-1-of-2 { width: 98%; padding-right: 1%;}
.span-1-of-4, .span-2-of-4, .span-3-of-4, .span-4-of-4 { width: 48%; }
.span-1-of-4:nth-child(2n) {
margin-left: 2%;
}
}
/* small phones 0 to 480 */
#media only screen and (max-width: 480px) {
.col { margin: 1% 1% 1% 0%; }
.span-1-of-2 { width: 100%; padding-right: 1%;}
.span-1-of-4, .span-2-of-4, .span-3-of-4, .span-4-of-4 { width: 100%; }
.span-1-of-4:nth-child(2n) {
margin-left: 0;
}
}
/* STYLE.CSS */
/* -------- REUSABLE COMPONENETS -------- */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.clearfix {zoom: 1;}
.clearfix:after {
content: ' ';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* row class from grid css */
.row {
width: 1140px;
margin: 0 auto;
}
section {
padding: 80px 0;
}
/* class to modify out-of-the-box grid classes (like 'span-1-of-4') */
.box {
background-color: #1ba1e2;
border: 1px solid gray;
}
<body>
<!-- FIRST ROW -->
<div class="row">
<div class="col span-1-of-2 box">
<h3>first-row span-1</h3>
</div>
<div class="col span-1-of-2 box">
<h3>first-row span-2</h3>
</div>
</div>
<!-- SECOND ROW -->
<div class="row">
<div class="col span-1-of-4 box">
<h3>second-row span-1</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We
work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="col span-1-of-4 box">
<h3>second-row span-2</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We
work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="col span-1-of-4 box">
<h3>second-row span-3</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We
work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="col span-1-of-4 box">
<h3>second-row span-4</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We
work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
</div>
</body>
Related
I am trying to render a image and as the errorCount increases show an different image everything works but image not displaying i had it but broke it
I am trying to figure out why the image will not display. I am trying to A different object everytime errorCount increases. Everything works but image will not display. I had it at one point but now I cannot figure out why it will not display. All the functionality works except displaying the image I want to display.
strike-image-data.js
import './images/hangmanScoreImg1.png';
import './images/hangmanScoreImg2.png';
import './images/hangmanScoreImg3.png';
import './images/hangmanScoreImg4.png';
import './images/hangmanScoreImg5.png';
import './images/hangmanScoreImg6.png';
import './images/hangmanScoreImg7.png';
const strikeImageData = [
{
id: 1,
image: "./images/hangmanScoreImg1.png" ,
name: 'start stage',
phrase: 'You have 6 more wrong guesses left',
},
{
id: 2,
image:'./images/hangmanScoreImg2.png',
name: 'strike one stage',
phrase:'You have 5 more wrong guesses left',
},
{
id: 3,
image:'./images/hangmanScoreImg3.png',
name:'strike two stage',
phrase:'You have 4 more wrong guesses left',
},
{
id: 4,
image:'./images/hangmanScoreImg4.png',
name:'strike three stage',
phrase:'You have 3 more wrong guesses left',
},
{
id: 5,
image:'./images/hangmanScoreImg5.png',
name:'strike four stage',
phrase:'You have 2 more wrong guesses left',
},
{
id: 6,
image:'./images/hangmanScoreImg6.png',
name:'strike five stage',
phrase:'You have 1 more wrong guess left',
},
{
id: 7,
image:'./images/hangmanScoreImg7.png',
name:'gameover stage',
phrase:'Game Over',
}
];
export default strikeImageData;
gameboard.js
import React, { useState, useEffect } from 'react';
import LetterGrid from './letter-grid';
import ButtonGrid from './button-grid';
import strikeImageData from './strike-image-data';
import './app.css';
// eslint-disable-next-line
export default function({secretWord, maxErrors, isShown}) {
const [guessedLetters, setGuessedLetters] = useState([]);
const [errorCount, setErrorCount] = useState(0);
const [strikeStages] = useState(strikeImageData);
const [index, setIndex] = React.useState(0);
const letterGuessedHandler = function(letter) {
let val = letter.toLowerCase();
if (secretWord.toLowerCase().indexOf(val) === -1) {
setErrorCount(errorCount + 1);
setIndex(index + 1);
}
setGuessedLetters(prev => [...prev, val]);
}
useEffect(() => {
const lastIndex = strikeStages.length - 1;
if(index < 0) {
setIndex(lastIndex);
}
if(index > lastIndex) {
setIndex(0);
}
}, [index, strikeStages]);
return (
<div className={isShown ? '' : 'hidden'}>
<section className='section'>
<div className='section-center'>
{strikeStages.map((strikeStage, strikeStageIndex) => {
const { id, image, name, phrase } = strikeStage;
let position = 'nextSlide';
if (strikeStageIndex === index) {
position = 'activeSlide';
}
if (strikeStageIndex === index - 1 || (index === 0 && strikeStageIndex === strikeStages.length - 1)) {
position = 'lastSlide';
}
return (
<article className={position} key={id} >
<img src={image} alt={name} />
<h4>{name}</h4>
<p className="text">{phrase}</p>
</article>
);
})}
</div>
</section>
<div>
Mistakes Left: {maxErrors - errorCount}
</div>
<LetterGrid
secretWord={secretWord}
guessedLetters={guessedLetters}
/>
<ButtonGrid
letterGuessed={letterGuessedHandler}
isShown={errorCount < maxErrors}
/>
</div>
)
}
app.js
import {useState} from 'react';
import './app.css';
import GameBoard from './game-board';
import WordSelect from './word-select';
export default function App() {
const [secretWord, setSecretWord] = useState('');
return (
<div className="app-container">
<h1>Welcome to Hangman</h1>
<p>Do you want to play the Hangman Game?</p>
<div>
<WordSelect
isShown={!secretWord}
wordSelected={val => setSecretWord(val)}
/>
<GameBoard
secretWord={secretWord}
maxErrors={6}
isShown={secretWord}
/>
</div>
</div>
);
}
app.css
/*Global Styles */
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(21, 91%, 17%);
--clr-primary-2: hsl(21, 84%, 25%);
--clr-primary-3: hsl(21, 81%, 29%);
--clr-primary-4: hsl(21, 77%, 34%);
--clr-primary-5: hsl(21, 62%, 45%);
--clr-primary-6: hsl(21, 57%, 50%);
--clr-primary-7: hsl(21, 65%, 59%);
--clr-primary-8: hsl(21, 80%, 74%);
--clr-primary-9: hsl(21, 94%, 87%);
--clr-primary-10: hsl(21, 100%, 94%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-black: #222;
--transition: all 0.3s linear;
--spacing: 0.1rem;
--radius: 0.25rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
img {
min-width: 150px;
min-height: 150px;
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
#media screen and (min-width: 800px) {
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
.app-container {
width: 550px;
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.mt-10 {
margin-top: 10px;
}
.letter {
border: 1px solid gray;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
width: 34px;
text-align: center;
}
.button {
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
width: 34px;
text-align: center;
margin-right: 4px;
margin-bottom: 4px;
}
.guessed {
display: none;
}
.hidden {
display: none;
}
/* Global Classes */
/* section */
.section {
width: 90vw;
margin: 5rem auto;
max-width: var(--max-width);
}
#media screen and (min-width: 992px) {
.section {
width: 95vw;
}
}
.section-center {
margin: 0 auto;
margin-top: 4rem;
width: 80vw;
height: 450px;
max-width: 800px;
text-align: center;
position: relative;
display: flex;
overflow: hidden ;
}
article {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: var(--transition);
}
article.activeSlide {
opacity: 1;
transform: translateX(0);
}
article.lastSlide {
transform: translateX(-100%);
}
article.nextSlide {
transform: translateX(100%);
}
Circular progress bar with react
In my react app I am using a circular progress bar to show time left. The progress bar is using bootstrap 3. The code is working fine when the value is hard coded but when I give a percentage value from a state variable the progress bar is not showing. I copied this code from the net and it uses bootstrap 3. I want to use it to show reverse timer. So the percentage is 100 initially and it decreases every second. The circle shows the initial value at first but as soon as the value of percent changes the circle loses the color and shows basic gray color.
the code in render is
constructor(props){
super(props);
this.state = {
hours: 2,
min: 0,
secs: 0,
fin: false,
percent: 100
}
}
componentDidMount(){
this.myInterval = setInterval(() => {
var {hours,min,secs,fin,percent} = this.state;
if(secs > 0){
secs--;
} else {
secs = 59;
if(min > 0){
min--;
percent = Math.floor(percent - 0.8);
} else {
min = 59;
percent = Math.floor(percent - 0.8);
hours--;
if(hours < 0){
fin = true;
hours = min = secs = 0;
}
}
}
this.setState(prevState => ({
hours, min , secs , fin, percent
}))
}, 1000);
}
<div className="container">
<div className="row">
<div className="col-sm-3 col-md-2">
<div className="progress" data-percentage={this.state.percent}>
<span className="progress-left">
<span className="progress-bar"></span>
</span>
<span className="progress-right">
<span className="progress-bar"></span>
</span>
<div className="progress-value">
<div>
{this.state.hours}:{this.state.min}<br/>
<span>Time Left</span>
</div>
</div>
</div>
</div></div></div>
SASS
$borderWidth: 7px;
$animationTime: 1.5s;
$border-color-default: #eee;
$border-color-fill: #ffb43e;
$size: 150px;
//Create how many steps
$howManySteps: 10; //this needs to be even.
//for fun try using 20 and changine in the HTML the data-percentage to 15 or 85
.progress {
width: $size;
height: $size;
line-height: $size;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
&:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: $borderWidth solid $border-color-default;
position: absolute;
top: 0;
left: 0;
}
> span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress-left {
left: 0;
}
.progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: $borderWidth;
border-style: solid;
position: absolute;
top: 0;
border-color: $border-color-fill;
}
.progress-left .progress-bar {
left: 100%;
border-top-right-radius: ($size/2);;
border-bottom-right-radius: ($size/2);;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
//animation: loading-2 1.5s linear forwards 1.8s;
}
.progress-right {
right: 0;
.progress-bar {
left: -100%;
border-top-left-radius: ($size/2);;
border-bottom-left-radius: ($size/2);;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
//animation: loading-1 1.8s linear forwards;
}
}
.progress-value {
display: flex;
border-radius: 50%;
font-size: 28px;
text-align: center;
line-height: 20px;
align-items: center;
justify-content: center;
height: 100%;
//font-family: $work-sans;
font-weight: 300;
div {
margin-top: 10px;
}
span {
font-size: 12px;
text-transform: uppercase;
}
}
}
/* This for loop creates the necessary css animation names
Due to the split circle of progress-left and progress right, we must use the animations on each side.
*/
#for $i from 1 through $howManySteps {
$stepName: ($i*(100 / $howManySteps));
//animation only the left side if below 50%
#if $i <= ($howManySteps/2) {
.progress[data-percentage="#{$stepName}"] {
.progress-right .progress-bar {
animation: loading-#{$i} $animationTime linear forwards;
}
.progress-left .progress-bar {animation: 0;}
}
}
//animation only the right side if above 50%
#if $i > ($howManySteps/2) {
.progress[data-percentage="#{$stepName}"] {
.progress-right .progress-bar {
animation: loading-#{($howManySteps/2)} $animationTime linear forwards; //set the animation to longest animation
}
.progress-left .progress-bar {
animation: loading-#{$i - ($howManySteps/2)} $animationTime linear forwards $animationTime;
}
}
}
}
//animation
#for $i from 1 through ($howManySteps/2) {
$degrees: (180/($howManySteps/2));
$degrees: ($degrees*$i);
#keyframes loading-#{$i}{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate($degrees);
transform: rotate(#{$degrees}deg);
}
}
}
//additional styling
.progress {
margin-bottom: 1em;
}
React-Select Scrollbar Styling
I am trying to change the style of scrollbar from react-select and customise it. Anyone have any idea how?
This is the code in css that I want to style it to
/* Scroll Bar */
::-webkit-scrollbar {
width: 4px;
height: 0px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
In react-select v4+, we use like this
const styles = {
menuList: (base) => ({
...base,
"::-webkit-scrollbar": {
width: "4px",
height: "0px",
},
"::-webkit-scrollbar-track": {
background: "#f1f1f1"
},
"::-webkit-scrollbar-thumb": {
background: "#888"
},
"::-webkit-scrollbar-thumb:hover": {
background: "#555"
}
});
}
return <Select styles={styles} ... />
Try overriding react-select css:
/* Scroll Bar */
select__menu-list::-webkit-scrollbar {
width: 4px;
height: 0px;
}
select__menu-list::-webkit-scrollbar-track {
background: #f1f1f1;
}
select__menu-list::-webkit-scrollbar-thumb {
background: #888;
}
select__menu-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
Flexbox - different items order on mobile than on desktop
I’m trying to do a responsive website in flexbox. This is how my website looks like on big screens. And this is what I want to get on mobile devices. As you can see, my problem lies in the different order of items on mobile and on the desktop. My question is: is it possible to do?
This is the best layout I can think of right now: traditional float for big screen & flex for small screen to reorder.
* { box-sizing: border-box !important; }
[class^="item-"] {
background-color: blue;
border: 3px solid white;
color: white;
float: left;
}
.item-1, .item-5, .item-6, .item-9 {
float: none;
}
.item-2 {
width: 33.33%;
height: 300px;
}
.item-3, .item-4 {
width: 33.33%;
height: 200px;
}
.item-5 {
height: 100px;
overflow: hidden;
}
.item-7, .item-8 {
width: 50%;
}
#media (max-width: 768px) {
[class^="item-"] {
float: none;
width: initial;
height: 50px;
}
.container {
display: flex;
flex-direction: column;
}
.item-5 {
order: 1;
}
.item-2 {
order: 2;
}
.item-6 {
order: 3;
}
.item-7 {
order: 4;
}
.item-8 {
order: 5;
}
.item-9 {
order: 6;
}
.item-3 {
order: 7;
}
.item-4 {
order: 8;
}
}
<div class="container">
<div class="item-1">item1</div>
<div class="item-2">item2</div>
<div class="item-3">item3</div>
<div class="item-4">item4</div>
<div class="item-5">item5</div>
<div class="item-6">item6</div>
<div class="item-7">item7</div>
<div class="item-8">item8</div>
<div class="item-9">item9</div>
</div>
Optimize prettyPhoto lightbox for mobile devices?
I'm currently using prettyPhoto on a site I'm working on but have run into a small problem on mobile devices. The plugin has the option "allow_resize: false" which disallows resizing the photos bigger than viewport however the resulting downsized images are too small at roughly 30-35% of the viewport width. This is a problem on a 480px wide screen as the images are only utilising a fraction of the available space. What I'm trying to do is get it to rescale to roughly 95% of the viewport. I've tried fixing this with css and media queries but I run into a problem where the vertical images run off the page when the width is set to 95%. I'm guessing modifying the original plugin or adding javascript would be a better solution. Does anyone have any suggestions on the best way to do this?
Try this (not my code):
/* prettyPhoto styling for small screens */
#media (max-width: 500px)
{
.pp_pic_holder.pp_default
{
width: 100%!important;
margin-top:-100px !important;
left: 0!important;
overflow: hidden;
}
div.pp_default .pp_content_container .pp_left
{
padding-left: 0!important;
}
div.pp_default .pp_content_container .pp_right
{
padding-right: 0!important;
}
.pp_content
{
width: 100%!important;
height: auto!important;
}
.pp_fade
{
width: 100%!important;
height: 100%!important;
}
a.pp_expand,
a.pp_contract,
.pp_hoverContainer,
.pp_gallery,
.pp_top,
.pp_bottom
{
display: none!important;
}
#pp_full_res img
{
width: 100%!important;
height: auto!important;
}
.pp_details
{
box-sizing: border-box;
width: 100%!important;
padding-left: 3%;
padding-right: 4%;
padding-top: 10px;
padding-bottom: 10px;
background-color: #fff;
margin-top: -2px!important;
}
a.pp_close
{
right: 10px!important;
top: 10px!important;
}
}
I got the same issue on pretty photo and found the same css code fix as posted by rafael.dev. However, it seems still not pretty good because the previous and next button disappear and the style really strange. I think the problem just caused by the calculating of the resizing, so I try to find the snippet of the resize function from the js source and that was easily got the solution as below:
I am using the 3.1.6 version, please find the function _fitToViewport in line 568.
Then scroll down some more you will see imageWidth = (windowWidth - 200); and imageHeight = (windowHeight - 200);
Just reduce the number and then the mobile view will become very nice!! I try to adjust many times and got the best fit number is 38 and 100. You can just copy the following code to replace the original one:
if(pp_containerWidth > windowWidth - 38){
imageWidth = (windowWidth - 38);
imageHeight = (height/width) * imageWidth;
} else if(pp_containerHeight > windowHeight - 100) {
imageHeight = (windowHeight - 100);
imageWidth = (width/height) * imageHeight;
} else {
fitting = true;
};
#media only screen and (max-width: 480px) {
.pp_pic_holder.pp_default { width: 90%!important; left: 5%!important; overflow: hidden; }
div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
.pp_content { width: 100%!important; height: auto!important; }
.pp_fade { width: 100%!important; height: 100%!important; }
a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
#pp_full_res img { width: 100%!important; height: auto!important; }
.pp_details { width: 100%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 10px; background-color: #fff; margin-top: -2px!important; }
a.pp_close { right: 7%!important; top: 10px!important; }
#pp_full_res { padding: 5px !important; }
}
#media only screen and (max-width: 480px) {
*[class~=pp_pic_holder] { width: 100% !important; left: 0px !important; }
*[class~=pp_hoverContainer] { width: 90% !important; height: 180px !important; }
*[class~=pp_fade] { width: 389px !important; }
*[class~=pp_hoverContainer] { height: 190px !important; }
*[class~=pp_right] { height: 220px !important; }
*[class~=pp_content] { height: 100% !important; width: 320px !important; }
#fullResImage { height: 100% !important; width: 320px !important; }
}
Edit jquery.prettyPhoto.js on line number 580 you will find this code :
if((pp_containerWidth > windowWidth)){
imageWidth = (windowWidth - 200);
imageHeight = (height/width) * imageWidth;
}else if((pp_containerHeight > windowHeight)){
imageHeight = (windowHeight - 200);
imageWidth = (width/height) * imageHeight;
}else{
fitting = true;
};
Just change the value from 200 to 30. I think this will work fine for you.