TrueVacancy Academy

HTML, CSS & JavaScript · Chapter 1.10 · Pro level

Responsive Design: CSS Grid + Media Queries (Phone & Laptop)

Responsive Design: CSS Grid + Media Queries (मोबाइल और लैपटॉप)

70%+ of Indian users open websites on a phone. A professional site must look good on every screen — this is Responsive Design. Three tools: 1) <meta name="viewport"> tells phones to use their real width. 2) CSS Grid (display: grid; grid-template-columns: repeat(3, 1fr);) makes a neat table-like layout of 3 equal columns. 3) A media query @media (max-width: 600px) { ... } changes the rules on small screens — e.g. 1 column on phones.

भारत में 70% से ज़्यादा लोग वेबसाइट मोबाइल पर खोलते हैं। प्रोफ़ेशनल साइट हर स्क्रीन पर अच्छी दिखनी चाहिए — इसे Responsive Design कहते हैं। तीन औज़ार: 1) <meta name="viewport"> फ़ोन को अपनी असली चौड़ाई इस्तेमाल करने को कहता है। 2) CSS Grid (display: grid; grid-template-columns: repeat(3, 1fr);) 3 बराबर कॉलम का साफ़ लेआउट बनाता है। 3) Media query @media (max-width: 600px) { ... } छोटी स्क्रीन पर नियम बदल देती है — जैसे फ़ोन पर 1 कॉलम।

Open this chapter in the live classroomHTML, CSS & JavaScript course outline

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

<meta name="viewport" ...>
Makes phones show the page at their real width (no tiny zoomed-out page).
फ़ोन पर पेज असली चौड़ाई में दिखता है (छोटा ज़ूम-आउट पेज नहीं)।
display: grid;
Turns a box into a grid of rows and columns.
डिब्बे को rows और columns वाले जाल (grid) में बदल देता है।
repeat(3, 1fr)
3 columns, each taking 1 equal "fraction" of the width.
3 कॉलम, हर एक चौड़ाई का बराबर हिस्सा (1fr) लेता है।
@media (max-width: 600px)
Rules inside apply only when the screen is 600px wide or less.
अंदर के नियम तभी लगते हैं जब स्क्रीन 600px या उससे छोटी हो।

Ready example

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .item { background: #e0e7ff; padding: 18px; border-radius: 10px; text-align: center; }
  @media (max-width: 600px) {
    .grid { grid-template-columns: 1fr; }
  }
</style>

<h2>Course Menu</h2>
<div class="grid">
  <div class="item">🌐 HTML</div>
  <div class="item">🐍 Python</div>
  <div class="item">🧠 AI</div>
</div>

What you will see: Wide preview = 3 columns. Press ⛶ Fullscreen / resize — on narrow screens it becomes 1 column.

चौड़े प्रिव्यू में 3 कॉलम। छोटी स्क्रीन (मोबाइल) पर यही 1 कॉलम बन जाएगा।

Line by line

.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
On laptops: 3 equal columns.
लैपटॉप पर: 3 बराबर कॉलम।
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
On phones: the same items stack in 1 column.
फ़ोन पर: वही items 1 कॉलम में एक के नीचे एक।
<meta name="viewport" ...>
Needed so the media query works on real phones.
ज़रूरी है ताकि असली फ़ोन पर media query काम करे।

Common mistake

✗ Wrong

@media max-width: 600px { }

✓ Right

@media (max-width: 600px) { }

The condition of a media query must be inside round brackets ( ).

Media query की शर्त गोल ब्रैकेट ( ) के अंदर लिखनी होती है।

Your task

Turn .gallery into a 2-column grid, then add a media query that makes it 1 column on screens up to 500px.

.gallery को 2 कॉलम वाली grid बनाओ, फिर एक media query जोड़ो जो 500px तक की स्क्रीन पर 1 कॉलम बना दे।

  1. In .gallery { } add display: grid; and grid-template-columns: repeat(2, 1fr);.
    .gallery { } में display: grid; और grid-template-columns: repeat(2, 1fr); जोड़ो।
  2. Below it write @media (max-width: 500px) { .gallery { grid-template-columns: 1fr; } }.
    उसके नीचे @media (max-width: 500px) { .gallery { grid-template-columns: 1fr; } } लिखो।
  3. Press ▶ Run.
    ▶ Run दबाओ।
Starter code for the task
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .gallery {
    /* TODO 1: display: grid; aur 2 columns: grid-template-columns: repeat(2, 1fr); */
    gap: 8px;
  }
  .pic { background: #fde68a; padding: 20px; text-align: center; }
  /* TODO 2: @media (max-width: 500px) mein .gallery ko 1 column (1fr) banao */
</style>

<div class="gallery">
  <div class="pic">📷 1</div>
  <div class="pic">📷 2</div>
  <div class="pic">📷 3</div>
  <div class="pic">📷 4</div>
</div>

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

Quick quiz

What does @media (max-width: 600px) { ... } do?

@media (max-width: 600px) { ... } क्या करता है?

  1. Plays a video
  2. Applies the rules only on screens 600px wide or smaller
  3. Makes the page 600px tall
  4. Deletes the page on phones
Show the answer

Answer: B (Applies the rules only on screens 600px wide or smaller)

Media queries apply CSS only when the condition (small screen) is true.

Media query तभी CSS लगाती है जब शर्त (छोटी स्क्रीन) सच हो।

Practice problems for this chapter

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.