Make a Responsive Web Page Without Using a CSS or JavaScript Framework

The patio11bot site looks OK on a desktop, but terrible on mobile - so we'll turn it into a responsive webpage. First (and most important), set the meta viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Then, we can use media CSS queries to differentiate styles between mobile (smaller than 600px), and desktop (larger than 600px):

@media screen and (max-width: 600px) { .footer p { font-size: 14px; } }

@media screen and (min-width: 601px) { .footer p { font-size: 12px; } }