You are here

salvattore_default.css in Salvattore (CSS driven Masonry) 8

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

/* Hide text that defines classes to be used by JS. */
.slv-grid[data-columns]::before {
  display: none;
}

@media screen and (max-width: 480px){
  .slv-grid[data-columns]::before {
    content: '1 .slv-column.size-1of1';
  }
}
@media screen and (min-width: 481px) and (max-width:819px) {
  .slv-grid[data-columns]::before {
    content: '2 .slv-column.size-1of2';
  }
}
@media screen and (min-width: 820px) and (max-width: 1299px) {
  .slv-grid[data-columns]::before {
    content: '3 .slv-column.size-1of3';
  }
}
@media screen and (min-width: 1300px){
  .slv-grid[data-columns]::before {
    content: '4 .slv-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. .slv-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. /* Hide text that defines classes to be used by JS. */
  9. .slv-grid[data-columns]::before {
  10. display: none;
  11. }
  12. @media screen and (max-width: 480px){
  13. .slv-grid[data-columns]::before {
  14. content: '1 .slv-column.size-1of1';
  15. }
  16. }
  17. @media screen and (min-width: 481px) and (max-width:819px) {
  18. .slv-grid[data-columns]::before {
  19. content: '2 .slv-column.size-1of2';
  20. }
  21. }
  22. @media screen and (min-width: 820px) and (max-width: 1299px) {
  23. .slv-grid[data-columns]::before {
  24. content: '3 .slv-column.size-1of3';
  25. }
  26. }
  27. @media screen and (min-width: 1300px){
  28. .slv-grid[data-columns]::before {
  29. content: '4 .slv-column.size-1of4';
  30. }
  31. }