1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    htmlHTML 5

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