Now let's think about smaller devices by shrinking our browser. It gets a little tight down near tablet dimensions:
In our media query, where we had originally removed all of the float stuff. Let's change the flex-direction to column:
@media screen and (max-width: 550px) { h1 { font-size: 40px; } h2 { font-size: 26px; } .columns { flex-direction: column; } .content-block .figure { width: 200px; display: block; margin-left: auto; margin-right: auto; float: none; } .content-block h1 { text-align: center; } .button-narrow { width: 100%; }}/* end of media query */
We're back to a one-column-stacked layout for narrower browser ...
