TNT | Styl'n | Everybody’s on the Phone — Responsive with Media Queries

Song Lyrics

Verse 1

Message in a bottle
Rhythm of a drum
Smoke signals and telegraphs
Make the airwaves hum
But that’s all ancient history
Like bongs and Lincoln Logs
Now we livin’ like the Jetsons
In a wacky wireless fog

Talkin’, squawkin’, hawkin’
Who knows if anybody’s gettin’ through

Verse 2

Toasters talk to CrackBerries
Boston to Bombay
Teenage schemes and MaBell dreams
As minutes tick away
We act like crazy people
Talking to ourselves
Crashing cars in conversation
Still that stuff flies off the shelf

The information superhighways
Crawled up like an L.A. traffic jam

Chorus

Everybody’s on the phone
So connected and all alone
From the pizza boy to socialite
We all salute the satellite
Won’t you text me with your master plan?
You’re loud and clear but I don’t understand
I’m a digital explorer in analog roam
And everybody’s on the phone

Verse 3

Do you remember dialing up?
Yes, I remember well
Now I just can’t go anywhere
Without my sacred cell
I think that I might die
If I miss anything at all
Text me, send me an e-mail
Ring me up, give me a call
I’m ADD on AOL and tryin’ to read
The writing on the wall

Chorus (Repeat)

Bridge

Now I’m a real jungle jump up, I’m a megahertz man
I swing from tree to tree on the very latest plan
On the download and the dropouts
On every major city across the land
I got Bob Marley on my ring tone
Get up, stand up, reach out
Touch somebody man

Chorus (Final)

Everybody’s on the phone
So connected and all alone
From the pizza boy to socialite
We all salute the satellite
Won’t you text me with your master plan?
You’re loud and clear but I don’t understand
And I’m a digital explorer in analog roam
And everybody’s on the phone
And I’m a digital explorer in an analog roam
And everybody’s on the phone

What Changed: Styled → Responsive

This page is identical to the styled version with one addition: two @media blocks at the bottom of the <style> element. No HTML changed. No Bootstrap. No external file.

What a media query is.

A @media rule is an if statement in CSS. The declarations inside it apply only when the specified condition is true. The condition used here is viewport width:

/* Default — applies at ALL widths */
body > header h1 { font-size: 2.5rem; }

/* Override — applies ONLY when viewport <= 480px */
@media (max-width: 480px) {
    body > header h1 { font-size: 1.4rem; }
}

Same selector, two rules. The @media rule fires when the condition is met — source order decides the winner, not specificity.

When the viewport is wider than 480 px, only the first rule applies. Narrow the viewport below 480 px and the @media condition becomes true; the second rule, appearing later in the source, takes over. Widen it again and the condition becomes false; the first rule returns.

The two breakpoints on this page.

768 px — roughly tablet-sized. The header shrinks and the article padding reduces. The layout stays comfortable.
480 px — phone portrait. Every padded element gets tighter horizontal spacing, the h1 drops to 1.4 rem, and all font sizes stay readable.

How to test it in DevTools.

Open DevTools (F12) → Device Toolbar (Ctrl+Shift+M). Drag the right-edge handle left. Watch the header and article resize as you cross 768 px, then again at 480 px. In the Styles pane, active @media rules show a small screen indicator; inactive breakpoint rules are listed but greyed out.

Desktop-first vs. mobile-first.

This page uses desktop-first (max-width): the defaults target wide screens and breakpoints narrow things down for smaller ones. Bootstrap 5 uses mobile-first (min-width): defaults target narrow screens and breakpoints expand outward. Both produce the same visual result; the starting assumption is opposite. Google’s mobile-first indexing policy aligns with Bootstrap’s approach.

Try it: rotate your phone.

If you are on a mobile device, rotate it now — the page background changes from sandy cream to sky blue (#98d1f2) and switches back when you return to portrait. In DevTools on a desktop, open the Device Toolbar (Ctrl+Shift+M) and use the rotate icon to toggle orientation. In the Styles pane, watch the @media (max-height: 600px) and (orientation: landscape) rule flip between active and inactive — the same active/dimmed behavior as the max-width breakpoints above, triggered by rotation instead of width.

The curriculum sequence:

Structure without styling — done
CSS for aesthetics — done
This page — CSS media queries, pure responsiveness without Bootstrap
Goal — Bootstrap 5, where the grid classes handle all of this automatically

See the EOP cover page for a full overview of all four stages.