More actions
Content deleted Content added
m minor flex adjustments |
m margin and box shadow added to flex |
||
| Line 423: | Line 423: | ||
/* Create two unequal columns that sits next to each other */ |
/* Create two unequal columns that sits next to each other */ |
||
/* left column */ |
/* left column */ |
||
.left { |
.left-side { |
||
flex: 65%; |
flex: 65%; |
||
background-color: #f7f7f7; |
background-color: #f7f7f7; |
||
padding: |
padding: 15px; |
||
margin: 5px; |
|||
box-shadow: 0 4px 4px rgba(0,0,0,0.1); |
|||
} |
} |
||
/* right column */ |
/* right column */ |
||
.right { |
.right-side { |
||
flex: 25%; |
flex: 25%; |
||
background-color: #dbdbdb; |
background-color: #dbdbdb; |
||
padding: |
padding: 15px; |
||
margin: 5px; |
|||
box-shadow: 0 4px 4px rgba(0,0,0,0.1); |
|||
} |
} |
||
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */ |
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */ |
||
@media screen and (max-width: |
@media screen and (max-width: 800px) { |
||
.row { |
.row { |
||
flex-direction: column; |
flex-direction: column; |
||