/* Spezific styling for salvattore Feel free to edit it as you like More info at http://salvattore.com */ /* Base styles */ .column { float: left; } .size-1of5 { width: 20%; } .size-1of4 { width: 25%; } .size-1of3 { width: 33.333%; } .size-1of2 { width: 50%; } /* Configurate salvattore with media queries */ @media screen and (max-width: 450px) { #grid[data-columns]::before { content: '1 .column'; } } @media screen and (min-width: 451px) and (max-width: 700px) { #grid[data-columns]::before { content: '2 .column.size-1of2'; } } @media screen and (min-width: 701px) and (max-width: 850px) { #grid[data-columns]::before { content: '3 .column.size-1of3'; } } @media screen and (min-width: 851px) and (max-width: 1600px) { #grid[data-columns]::before { content: '4 .column.size-1of4'; } } @media screen and (min-width: 1601px) { #grid[data-columns]::before { content: '5 .column.size-1of5'; } }