One idea
Responsive layout is not a set of famous screen sizes. Start with flexible layout, readable spacing, and content that can wrap.
Use media queries when the design needs a real change, like moving from one column to two columns.
Think content first
Your HackIndia project may be opened on a hostel phone, a lab desktop, or a tablet. The same HTML should work in all places.
Do not create a separate mobile page. Keep one semantic page. Let CSS adapt the layout.
Build mobile first
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
Responsive project grid
This pattern gives you one column on small screens. It becomes two columns when there is enough viewport width.
The card width is not fixed. The grid fills the available space.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
.page {
width: min(100% - 2rem, 1100px);
margin-inline: auto;
}
.project-grid {
display: grid;
gap: 1rem;
}
.card {
padding: 1rem;
border: 1px solid #d0d0d0;
border-radius: 0.75rem;
}
@media (min-width: 700px) {
.project-grid {
grid-template-columns: 1fr 1fr;
}
}Avoid fixed pages
Beginners often set a wrapper to width: 1200px and then wonder why the page scrolls sideways on a phone.
Prefer max-width with a flexible width. Avoid fixed heights for cards unless you really need them. Let text grow, especially when users zoom or use larger font settings.
Use DevTools slowly
Open your page in the browser, then resize the viewport. Watch where the layout breaks. That width is a useful place for a media query.
Do not copy random breakpoints from a tutorial. Your content decides the breakpoint.
Responsive nav
Flexbox is good when items sit in a row but should wrap on small screens.
This keeps links usable without hiding them behind a complex menu.
.site-nav {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
}
.site-nav a {
padding: 0.5rem 0.75rem;
}When the parent decides
A media query asks how wide the window is. Sometimes that is the wrong question: the same project card might sit in a wide main column on one page and a narrow sidebar on another, and the window is the same width in both.
A container query asks the parent instead. Mark the parent as a container, then lay the card out against the space it was given. Keep media queries for whole-page changes like the navigation.
/* The slot offers its width for children to ask about */
.card-slot {
container-type: inline-size;
}
/* Stacked by default */
.card {
display: grid;
gap: 12px;
}
/* Side by side only when the SLOT is wide enough,
whatever the window happens to be doing */
@container (min-width: 28rem) {
.card {
grid-template-columns: 120px 1fr;
}
}Do this now
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done