You are here

salvattore_default.css in Salvattore (CSS driven Masonry) 7

Same filename and directory in other branches
  1. 8 css/salvattore_default.css
  2. 7.2 css/salvattore_default.css
/* Check salvattore.com for more information. */
/* You’re free to use and define the classes: */
.salvattore-column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
.size-1of4 { width: 25%; }

@media screen and (max-width: 480px){
  #salvattore-grid[data-columns]::before {
    content: '1 .salvattore-column.size-1of1';
  }
}
@media screen and (min-width: 481px) and (max-width:819px) {
  #salvattore-grid[data-columns]::before {
    content: '2 .salvattore-column.size-1of2';
  }
}
@media screen and (min-width: 820px) and (max-width: 1299px) {
  #salvattore-grid[data-columns]::before {
    content: '3 .salvattore-column.size-1of3';
  }
}
@media screen and (min-width: 1300px){
  #salvattore-grid[data-columns]::before {
    content: '4 .salvattore-column.size-1of4';
  }
}

File

css/salvattore_default.css
View source
  1. /* Check salvattore.com for more information. */
  2. /* You’re free to use and define the classes: */
  3. .salvattore-column { float: left; }
  4. .size-1of1 { width: 100%; }
  5. .size-1of2 { width: 50%; }
  6. .size-1of3 { width: 33.333%; }
  7. .size-1of4 { width: 25%; }
  8. @media screen and (max-width: 480px){
  9. #salvattore-grid[data-columns]::before {
  10. content: '1 .salvattore-column.size-1of1';
  11. }
  12. }
  13. @media screen and (min-width: 481px) and (max-width:819px) {
  14. #salvattore-grid[data-columns]::before {
  15. content: '2 .salvattore-column.size-1of2';
  16. }
  17. }
  18. @media screen and (min-width: 820px) and (max-width: 1299px) {
  19. #salvattore-grid[data-columns]::before {
  20. content: '3 .salvattore-column.size-1of3';
  21. }
  22. }
  23. @media screen and (min-width: 1300px){
  24. #salvattore-grid[data-columns]::before {
  25. content: '4 .salvattore-column.size-1of4';
  26. }
  27. }