Layout Review
We learned how to build side-by-side layouts using CSS Flexbox and Grid. However, if you build a 3-column layout for a desktop monitor, those 3 columns will be crushed together and impossible to read on a small mobile phone screen. Today, we fix that.
Step 1: The Viewport Meta Tag (HTML Foundation)
Before writing a single line of CSS, you must tell the mobile phone not to "zoom out" to show the whole desktop page. Mobile browsers naturally try to shrink a massive website to fit on a tiny screen, making the text unreadable.
To prevent this, you must include the Viewport Meta Tag inside the <head> of your HTML document.
The HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
width=device-width: Tells the browser to set the width of the page to match the physical width of the device screen.initial-scale=1.0: Sets the initial zoom level exactly to 100% when the page first loads.
Step 2: Fluid Units vs. Fixed Units (%, vw, px)
To make a website responsive, you must stop using rigid, fixed measurements (like px) for your main layout wrappers. Instead, use fluid units that calculate math on the fly.
- px (Pixels): Fixed. A 500px box is always 500px wide, even if the user's phone is only 400px wide (causing a horrible horizontal scrollbar).
- % (Percentages): Fluid.
width: 50%;means the box will always take up exactly half of its Parent Container's width. - vw (Viewport Width): Fluid.
width: 50vw;means the box takes up exactly half of the entire browser window's width, ignoring parent containers.
The HTML & CSS:
<div class="parent-container">
<div class="fixed-box">Fixed 300px</div>
<div class="fluid-box">Fluid 50%</div>
</div>
/* CSS */
.fixed-box {
width: 300px; /* Never changes size */
background-color: #e74c3c;
}
.fluid-box {
width: 50%; /* Shrinks and grows automatically */
background-color: #2ecc71;
}
The Output:
Step 3: Responsive Images (max-width)
Images are extremely dangerous in web design. If you load an image that is 1000px wide, and the user's phone is only 400px wide, the image will rip right through your layout and destroy the webpage.
You must tell the browser: "Allow the image to shrink, but never let it grow larger than its original size." We do this using max-width.
The HTML & CSS:
<img class="responsive-img" src="large-photo.jpg" alt="Scenery">
/* CSS */
.responsive-img {
max-width: 100%; /* The image can never be wider than its parent container */
height: auto; /* Maintains the correct aspect ratio so it doesn't squish */
}
width: 100%, a tiny 100px icon will be stretched massively to fill the whole screen, becoming blurry. If you set max-width: 100%, the icon will stay at 100px, but will shrink if the screen becomes smaller than 100px.
Step 4: Media Queries (The Core Mechanic)
Fluid percentages are great, but eventually, a screen gets so small that 3 columns of text become unreadable even if they shrink. At a certain point, you need to completely change the layout from a row to a stacked column.
We use Media Queries. A media query uses the @media rule to wrap a block of CSS properties. The browser will ONLY execute those properties if a certain condition is true (like the screen size being smaller than 600px).
The Mechanics:
max-width: 600px: This code ONLY runs on screens that are 600px wide or smaller (Mobile phones).min-width: 601px: This code ONLY runs on screens that are 601px wide or larger (Tablets and Desktops).
The Code: Changing Background Color Based on Screen Size
.screen-test {
background-color: blue;
color: white;
}
/* The Media Query for Mobile Screens */
@media (max-width: 600px) {
.screen-test {
background-color: red; /* Overrides the blue background on small screens */
}
}
Step 5: The Flexbox Mobile Stack
The absolute most common use for a Media Query is taking a horizontal Flexbox row and turning it into a vertical stack for mobile users.
The HTML & CSS:
<div class="flex-layout">
<div class="box">Left Content</div>
<div class="box">Right Content</div>
</div>
/* CSS - Desktop Default */
.flex-layout {
display: flex;
flex-direction: row; /* Sit side-by-side */
gap: 10px;
}
/* CSS - Mobile Override */
@media (max-width: 600px) {
.flex-layout {
flex-direction: column; /* Stack vertically */
}
}
The Output (Simulating Desktop vs. Mobile):
If screen > 600px (Desktop View):
If screen <= 600px (Mobile View):
Final Quiz: Test Your Responsive Logic
Click the buttons below to verify your knowledge.
0 Comments