Content added Content deleted
m (flex box with border) |
(column fles for galleries) |
||
| Line 433: | Line 433: | ||
.row { |
.row { |
||
flex-direction: column; |
flex-direction: column; |
||
} |
|||
} |
|||
/* Create four equal columns that sits next to each other - useful for galleries */ |
|||
.column { |
|||
flex: 25%; |
|||
max-width: 25%; |
|||
padding: 0 4px; |
|||
} |
|||
.column img { |
|||
margin-top: 8px; |
|||
vertical-align: middle; |
|||
} |
|||
/* Responsive layout - makes a two column-layout instead of four columns */ |
|||
@media (max-width: 800px) { |
|||
.column { |
|||
flex: 50%; |
|||
max-width: 50%; |
|||
} |
|||
} |
|||
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ |
|||
@media (max-width: 600px) { |
|||
.column { |
|||
flex: 100%; |
|||
max-width: 100%; |
|||
} |
} |
||
} |
} |
||