EvaRoets / responsiveness

This repo contains all files for the responsiveness challenge, part of BeCode's Full Stack Junior Web Developer training: learn about CSS media queries.

Responsive Web Design 📱

Watch the result of this project >> here

🎯 Objectives

• Learn about CSS media queries

✔️ Specifications

• Complete these exercises to get a good sense of them
• Do NOT use any CSS frameworks

🌱 Must-haves

1️⃣ Change the color

Create an HTML file and a CSS file. Make the background color of the body red when the width of the viewport is smaller than 480px, green when the viewport width is bigger than (or equal to) 480px and smaller than 1024px, and blue when the viewport is bigger than (or equal to) 1024px. If you want prettier colors, try https://colorhunt.co/ for inspiration.

💡 480 and 1024 are also called breakpoints. They are typically used as threshold between cell phone, tablet, and computer.

2️⃣ Display / hide elements

Add three div: one div with the id="small", one div with the id="medium", another div with the id="large". In each element add the word small, medium and large respectively as content for display purposes. Make it so only one div is displayed, according to the width of the current viewport.

3️⃣ Adapt the size of the text according to the device

In each div, add a title and a few paragraphs (lorem ipsum, and such). Give the title a descriptive text (for example: "Content for smartphones"). Change the font size according to the device type.

4️⃣ Re-Arrange

Make it so that :

• if small, the 3 divs are stacked on top of one and other.
• if medium, the first div takes 2/3 of width, the second 1/3 of width and the third the full width.
• if big, the 3 divs should be next to one another.