FED Lab 4: CSS Media Queries & Grid
August 25, 2025
Prerequisite: The previous lab assignment (18th August) on Flexbox, Transitions, Transform,
and 2D Animations.
Objective: Extend the existing CSE Department BIT Mesra website by restructuring sections
using a grid layout and making the design responsive with media queries.
Task 1: Apply Grid Layout to the Homepage Sections
1. Convert the header section into a grid:
a. 2 columns → left side: logo/title, right side: navigation links.
b. Ensure spacing between navigation items using grid-gap.
c. Remove any previous flexbox styling used here.
2. Redesign the "Academic Programs" and "Research Areas" sections:
a. Use Grid with 2 columns (side by side lists).
b. On smaller screens (max-width 768px), switch to 1 column layout.
3. The Faculty Section:
a. Use a grid with 2 columns for listing faculty members.
b. Add spacing with gap: 20px;.
Task 2: Add Media Queries for Responsive Design
1. For screens above 1200px → Keep full grid layout (desktop mode).
2. For screens between 768px and 1200px → Reduce grid to 2 columns where possible.
3. For screens below 768px → Convert all sections to single-column stacking.
4. Hide the navigation bar (nav) on screens below 600px, and instead, add a "Menu" button
by adding <button id="menu-btn">Menu</button> in HTML
Task 3: Re-implement Footer with Grid
1. Redesign the footer using grid with 3 columns:
a. Column 1 → Department Name & Copyright
b. Column 2 → Quick Links (About, Programs, Research, Contact)
c. Column 3 → Contact Info
2. On small screens (<768px), collapse into 1 column stacked footer.
Task 4: Add a "Department Highlights" Section
1. Add a new section in HTML after "Events":
<section id="highlights">
<h2>Department Highlights</h2>
🌟
<div class="highlight">
<p> Ranked among the top CSE departments in India</p>
</div>
💡
<div class="highlight">
<p> Active research projects funded by DRDO & DST</p>
</div>
🤝
<div class="highlight">
<p> Collaborations with leading Tech companies</p>
</div>
</section>
a. Apply Grid layout with 3 columns for these highlights.
b. On tablets, reduce to 2 columns, and on mobile, 1 column.
c. Ask students to use CSS transitions so that when hovering over a highlight, it
slightly scales up using transform: scale(1.05);.
Notes on CSS Media-queries
Media queries allow developers to apply CSS rules based on device characteristics such as
screen width, height, orientation, or resolution. They are essential for responsive
design—making websites look good on mobiles, tablets, and desktops.
Following is the syntax of media queries:
@media media-type (media-feature) {
/* CSS Rules */
}
List of media-types:
all Used for all media type devices
print Used for print preview mode
screen Used for computer screens, tablets, smart-phones etc.
Here are some commonly used media features:
orientation Orientation of the viewport. Landscape or portrait
max-height Maximum height of the viewport
min-height Minimum height of the viewport
height Height of the viewport (including scrollbar)
max-width Maximum width of the viewport
min-width Minimum width of the viewport
width Width of the viewport (including scrollbar)
Examples:
/* For screens smaller than 768px */
@media screen (max-width: 768px) {
body {
font-size: 14px;
}
nav {
display: none;
}
}
The rules says, for the screen size less than 768px make the font-size of body 14px.
@media screen and (orientation: landscape) {
body {
display: grid;
grid-template-columns: 1fr 1fr; /* Split into two columns */
gap: 20px;
}
}
This will rearrange the page into two columns whenever the device is in landscape.
We can apply logical operators inside media queries.
, (comma) → OR condition
and → AND condition
not → Negates (applies when the condition is NOT true)
/* Apply styles if screen width <= 600px OR orientation is landscape */
@media screen and (max-width: 600px), screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
This style applies when either condition is true.
So if the screen is narrow OR the device is in landscape → background becomes light blue.
/* Apply styles only if screen width <= 800px AND orientation is portrait */
@media screen and (max-width: 800px) and (orientation: portrait) {
nav {
display: none; /* Hide navigation on small portrait devices */
}
}
This style applies only when BOTH conditions are satisfied.
/* Apply styles when device is NOT in portrait mode (so landscape only) */
@media not all and (orientation: portrait) {
body {
background-color: lightgreen;
}
}
Equivalent to saying: Apply this style in landscape. Notice the syntax: not all and ...
+++++++++++++++++++ End of Assignment ++++++++++++++++
