W3.CSSLesson 11Free preview
W3.CSS Responsive
This lesson is part of W3.CSS · All levels
Summary
The responsive page explains how W3.CSS adjust the layout to the screen size using several breakpoints: s for small screens, m for medium, and l for large. You use the breakpoint prefix on a class like w3-col m6, and then you control the visibility with w3-hide-small, w3-hide-medium, and w3-hide-large. The result is a page that stays neat from cell phone to desktop.
Key points
- Breakpoint W3.CSS: s below 600px, m from 601px to 992px, l from 993px
- The prefix breakpoint is written before the number, e.g. w3-col s6 m4
- W3-hide-small, w3-hide-medium, and w3-hide-large hide content per screen size
- W3-responsive makes tables can be rotated horizontally on a narrow screen
- W3-mobile prevents items bar shrinking on the screen of the mobile phone
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.