Module 3: CSS Foundations for

Responsive Design
📌 Course Overview:
This module explores CSS fundamentals, including the box model, positioning
techniques, and the use of relative and absolute units in responsive design.

🎯 Learning Outcomes:
By the end of this module, students should be able to:

i. Define the core CSS principles relevant to responsiveness.

ii. Demonstrate the use of the box model and positioning techniques.
iii. Utilize relative units effectively in layout design.

3.1 Define the core CSS principles relevant to responsiveness.

The core CSS principles relevant to responsiveness are key concepts that ensure a web page
adapts smoothly to different screen sizes and devices. Here are the main principles:

1. Fluid Layouts: Use relative units (like percentages, vw, vh, or em) instead of fixed units
(like px) for widths, heights, margins, and paddings. This allows the layout to scale
depending on the viewport size.
2. Media Queries: Use @media queries to apply different styles based on the viewport's
characteristics, such as width, height, or orientation. This enables the design to change for
different devices (mobile, tablet, desktop).

Example:

CSS

@media screen and (max-width: 768px) {

body {
font-size: 14px;
}
}

1
What is a Media Query?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain
condition is true.

Example

If the browser window is 600px or smaller, the background color will be

lightblue:

@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}

Add a Breakpoint

Earlier in this tutorial we made a web page with rows and columns, and it
was responsive, but it did not look good on a small screen.

Media queries can help with that. We can add a breakpoint where certain
parts of the design will behave differently on each side of the breakpoint.

Desktop

2
 Phone

Example

Here we use a media query to add a breakpoint at 600px:

@media only screen and (max-width: 600px) {

.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 6;}
.item3 {grid-area: 3 / span 6;}
.item4 {grid-area: 4 / span 6;}
.item5 {grid-area: 5 / span 6;}
}

Try it Yourself »

Another Breakpoint

You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.

Desktop
3
 Tablet

Phone

Example

Here we use media queries to add breakpoints when screen is max 600px,
when screen is min 600px, and when screen is min 768px :

@media only screen and (max-width: 600px) {

.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 6;}
.item3 {grid-area: 3 / span 6;}
.item4 {grid-area: 4 / span 6;}
.item5 {grid-area: 5 / span 6;}
}

@media only screen and (min-width: 600px) {

.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 1;}
.item3 {grid-area: 2 / span 4;}
.item4 {grid-area: 3 / span 6;}
.item5 {grid-area: 4 / span 6;}
}

@media only screen and (min-width: 768px) {

.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 1;}
.item3 {grid-area: 2 / span 4;}

4
 .item4 {grid-area: 2 / span 1;}
.item5 {grid-area: 3 / span 6;}
}

Try it Yourself »

Typical Device Breakpoints

There are tons of screens and devices with different heights and widths, so it
is hard to create an exact breakpoint for each device. To keep things simple
you could target five groups:

Example
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
Try it Yourself »

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the
orientation of the browser.

You can have a set of CSS properties that will only apply when the browser
window is wider than its height, a so called "Landscape" orientation:

5
Example

The web page will have a lightblue background if the orientation is in

landscape mode:

@media only screen and (orientation: landscape) {

body {
background-color: lightblue;
}
}
Try it Yourself »

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the
orientation of the browser.

You can have a set of CSS properties that will only apply when the browser
window is wider than its height, a so called "Landscape" orientation:

Example
The web page will have a lightblue background if the orientation is in landscape
mode:

@media only screen and (orientation: landscape) {

body {
background-color: lightblue;
}
}
Try it Yourself »

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different

screen sizes:

6
I will be hidden on small screens.
Example
/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}

Try it Yourself »

Change Font Size With Media Queries

You can also use media queries to change the font size of an element on
different screen sizes:

Variable Font Size.

Example
/* If the screen size is 601px or more, set the font-size of <div> to
80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}

/* If the screen size is 600px or less, set the font-size of <div> to

30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}

Try it Yourself »

7
 Exercise?

What does the @media rule allow you to do?

Add JavaScript conditions for resizing content.

Include CSS if a certain condition is met.

3. Flexible Grid System: Using a grid layout with flexbox or CSS grid allows
elements to be arranged in a way that adapts to the available space, without breaking the
layout. This is essential for responsiveness.
4. Viewport Meta Tag: The <meta> tag with the viewport attribute is crucial for
mobile responsiveness. It tells the browser to scale the page based on the device's width,
ensuring it’s properly displayed on different screen sizes.

Example:

html
Copy
<meta name="viewport" content="width=device-width, initial-
scale=1">

5. Responsive Images: Use CSS properties like max-width: 100% or the picture
element in HTML to ensure images scale according to the container's size and don't
overflow or distort.
6. Mobile-First Design: Start by designing the site for mobile screens (smaller screens),
then progressively enhance the layout for larger screens using media queries. This
ensures better performance and usability on mobile devices.
7. Flexbox & Grid Layouts: These layout techniques offer powerful ways to align,
distribute, and resize elements in a responsive manner.

By following these principles, developers can create flexible, adaptive, and user-friendly designs
that work across a variety of devices and screen sizes.

2. Demonstrate the use of the box model and positioning techniques. (Apply)

8
ChatGPT said:

The CSS Box Model is essential for understanding how elements are sized and positioned on a
webpage. It consists of four parts: content, padding, border, and margin. Here's how the box
model works:

1. Content: This is the actual content of the element, like text or images.
2. Padding: The space between the content and the border. Padding is inside the
box.
3. Border: A border around the padding (if defined).
4. Margin: The space outside the border, creating distance between the element and
other elements.

Example of Box Model in Action:

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Box Model Example</title>
<style>
.box {
width: 200px; /* Content width */
padding: 20px; /* Padding around content */
border: 5px solid #000; /* Border around padding */
margin: 15px; /* Margin outside the border */
background-color: lightblue;
}
</style>
</head>
<body>

<div class="box">
This is a box with padding, border, and margin.
</div>

</body>
</html>
Explanation:

 The content area is 200px wide.

 Padding is 20px on all sides, so it adds 40px (20px on left and right) to the total
width.
9
  The border is 5px thick on all sides, so it adds 10px (5px on left and right) to the
total width.
 Margin of 15px ensures there is space outside the box, between it and any other
content.

Total width = Content (200px) + Padding (40px) + Border (10px) = 250px

Total height = Content height + Padding height + Border height (if set similarly).

Positioning Techniques in CSS

Positioning allows you to control where an element appears in the layout. There are five primary
positioning methods in CSS:

1. Static (default): Elements are placed in the normal document flow.

2. Relative: The element is positioned relative to its normal position. You can move it from
its original location with top, right, bottom, or left.
3. Absolute: The element is positioned relative to the nearest positioned ancestor (one with
position other than static).
4. Fixed: The element is positioned relative to the viewport (browser window). It stays in
place even when the page is scrolled.
5. Sticky: The element is treated as relative until it crosses a certain scroll threshold, at
which point it becomes fixed.

Example of Positioning Techniques:

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Positioning Example</title>
<style>
.static-box {
background-color: lightgreen;
width: 150px;
padding: 10px;
margin: 10px;
}

.relative-box {
background-color: lightcoral;
width: 150px;
height: 150px;

10
 padding: 10px;
margin: 10px;
position: relative;
top: 20px; /* Moves the box 20px down */
left: 30px; /* Moves the box 30px to the right */
}

.absolute-box {
background-color: lightyellow;
width: 150px;
height: 150px;
padding: 10px;
position: absolute;
top: 100px; /* Moves the box 100px from the top of the
nearest positioned ancestor */
left: 50px;
}

.fixed-box {
background-color: lightblue;
width: 150px;
height: 150px;
padding: 10px;
position: fixed;
top: 20px;
right: 10px; /* Fixed to the top-right corner of the
viewport */
}

.sticky-box {
background-color: lightpink;
width: 150px;
height: 150px;
padding: 10px;
position: sticky;
top: 0; /* Sticks to the top of the screen once scrolled
*/
}
</style>
</head>
<body>

<div class="static-box">
Static Box (Default Position)
</div>

<div class="relative-box">

11
 Relative Box (Positioned Relative)
</div>

<div class="absolute-box">
Absolute Box (Positioned Absolute)
</div>

<div class="fixed-box">
Fixed Box (Positioned Fixed)
</div>

<div class="sticky-box">
Sticky Box (Positioned Sticky)
</div>

</body>
</html>
Explanation of the Positioning Techniques:

1. Static Box: This is the default, following the normal flow of the document,
appearing where it is in the HTML.
2. Relative Box: Positioned relative to its normal position, it has been shifted 20px
down and 30px to the right.
3. Absolute Box: Positioned 100px from the top and 50px from the left of its nearest
positioned ancestor.
4. Fixed Box: Positioned 20px from the top and 10px from the right of the viewport.
It stays fixed as you scroll.
5. Sticky Box: Behaves like relative until you scroll past it, at which point it
sticks to the top of the screen.

By using these principles, you can create layouts that are both visually appealing and functional
on a wide range of devices.

3. Utilize relative units effectively in layout design. (Apply)

ChatGPT said:

Relative units in CSS allow you to create flexible, scalable layouts that adapt to different screen
sizes, user settings, and devices. They are especially useful for responsive web design because
they allow the layout to adjust fluidly instead of being rigidly fixed to specific pixel values. Here
are some common relative units and how to use them effectively in layout design:

12
1. % (Percentage)

 Usage: Percentages are relative to the parent element’s size. When you set a
width or height to a percentage, it will adjust based on the size of its parent
container.

css
Copy
.container {
width: 80%; /* Takes up 80% of the viewport width */
margin: 0 auto; /* Centers the container */
}

.box {
width: 50%; /* 50% of the container width */
}
2. vw (Viewport Width) and vh (Viewport Height)

 Usage: vw and vh are relative to the viewport size. 1vw is 1% of the viewport’s
width, and 1vh is 1% of the viewport’s height. These units are ideal for full-page
layouts or for creating elements that scale with the viewport size.

css
Copy
.full-page {
width: 100vw; /* Full width of the viewport */
height: 100vh; /* Full height of the viewport */
}

.box {
width: 50vw; /* 50% of the viewport width */
height: 25vh; /* 25% of the viewport height */
}
3. em

 Usage: em is relative to the font size of the current element. It’s commonly used
for setting font sizes, padding, margins, and element widths, which will scale
proportionally based on the parent element's font size.

css
Copy
.parent {
font-size: 16px;
}

13
.child {
font-size: 2em; /* 2 times the parent font size (32px) */
padding: 1em; /* Padding is 1 times the font size (16px) */
}
4. rem (Root em)

 Usage: rem is relative to the root element's font size (usually <html>), making it
more predictable than em. It's often used for setting consistent and scalable
typography, margins, and padding.

css
Copy
html {
font-size: 16px; /* Default font size for the root element */
}

.box {
width: 20rem; /* 20 times the root font size (320px) */
padding: 1.5rem; /* 1.5 times the root font size (24px) */
}
5. ch (Character)

 Usage: ch is relative to the width of the "0" (zero) character in the current font.
It's useful for layouts where you need to control element widths based on text
length.

css
Copy
.input-box {
width: 30ch; /* 30 characters wide */
}
Example of Using Relative Units in a Responsive Layout

Let's create a simple responsive layout using relative units like %, vw, vh, em, and rem. We'll
build a flexible container with a header, main content area, and footer that adjust based on the
viewport size and root font size.

html
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

14
 <title>Responsive Layout with Relative Units</title>
<style>
html {
font-size: 16px; /* Set base font size */
}

body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.5;
}

.container {
display: flex;
flex-direction: column;
height: 100vh; /* Full height of the viewport */
}

header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1rem;
}

main {
flex: 1; /* Main content area takes up remaining space */
padding: 2rem;
background-color: #f4f4f4;
overflow: auto;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
}

.box {
width: 50%; /* 50% of its container */
padding: 2vw; /* Padding is relative to the viewport width
*/
margin: 2rem auto;
background-color: lightblue;
text-align: center;
}

15
 .responsive-box {
width: 80%; /* 80% of the container width */
padding: 2em; /* Padding relative to the font size */
background-color: lightcoral;
text-align: center;
margin: 0 auto;
}

@media (max-width: 768px) {

.box {
width: 80%; /* On smaller screens, box width is 80% of
container */
}
}
</style>
</head>
<body>

<div class="container">
<header>
<h1>Responsive Layout</h1>
</header>

<main>
<div class="box">
This box uses 50% of the container width and viewport-
relative padding.
</div>
<div class="responsive-box">
This box scales with font size and uses relative units
for padding.
</div>
</main>

<footer>
Footer content - adjusts with screen size
</footer>
</div>

</body>
</html>
Explanation:

 The container takes up 100% of the viewport height (100vh), and the layout
uses flexbox to divide the space.
 The header has a fixed padding using rem (relative to the root font size).
16
  The main content area uses flex to take up the remaining space, allowing the
layout to adapt to the viewport size.
 The .box elements have widths defined in percentages and viewport units (vw)
to make them responsive. The box's padding adjusts based on the viewport size
using vw.
 A media query is included to adjust the box's width to 80% when the screen size
is less than 768px, demonstrating how relative units work well with responsive
design.

Why Use Relative Units?

1. Scalability: The layout adjusts proportionally to different screen sizes and

resolutions, improving the user experience across devices.
2. Accessibility: When the root font size is increased (e.g., for users with
accessibility needs), elements using rem or em scale accordingly.
3. Responsive Design: Relative units such as %, vw, and vh are essential for
creating flexible, adaptive layouts that respond to changes in screen size and
orientation.

By utilizing relative units effectively, you can create more flexible and maintainable layouts that
work across different screen sizes, enhancing the overall user experience.

17