Rullst AcademyRullst Academy/Lesson
CSS and interface design · Lesson 09 / 12

Responsive design led by content

Available space changes. Information and usability need to remain.

Learning paths14 min

Let's discover together

  1. 1

    Start with one readable column. Then add @media (min-width:40rem) to use more columns when space permits. This is an example condition, not a universal list of phone models.

  2. 2

    In media queries, font-relative units use the browser’s initial font size, not the font-size you declared on html. Here 40rem corresponds to 640px if the initial size is 16px.

  3. 3

    The workshop compares 320px and 800px documents in a scrollable area. They are preview widths, not device detection. Media queries respond to preview width; rem in an ordinary declaration still relates to that document’s root.

  4. 4

    Also test intermediate sizes in the local file. Keep the HTML viewport meta, do not hide information just to fit, and avoid a minimum width larger than the screen. Responsiveness is a continuous reading and usability decision.

Workshop: one interface, different spaces

Edit <style id="lesson-css"> in “My files and GitHub”. The preview applies that CSS to the supplied HTML structure; check HTML edits in the downloaded file. External resources and CSS outside the study subset are not accepted here.

Go to my code

Measurements describe this preview; they do not guarantee every size or complete accessibility. Test long content, zoom, keyboard and assistive technologies in the local project.

Two-color contrast lab

Approximate ratio ·

Calculation only for two opaque sRGB colors selected here; it does not read your page. The threshold uses the unrounded ratio. It does not assess transparency, gradients, images, states or complete conformance.

Official links and next step

✦
YOUR MISSION

Create a narrow base and enhance layout with a media query.

Now it's your turn

Discovery workshop

Predict, change, compare

Base: one column. At min-width:40rem, three columns. Browser initial font size:16px.
Build your answers and check when you are ready.
A moment to understand

Do two widths prove every size works?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

Take it with you

Choose a breakpoint by observing when cards become cramped. Record a test below, at and above it.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.