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;
}
}