HTML Responsive Web Design
About
Read on Omnivore
Read Original
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.
This page is powered by Omnivore ‐ you can read more about how I use Omnivore here: Omnivore - Saving Articles for Citations in Obsidian.
Highlights
Media Queries
In addition to resize text and images, it is also common to use media queries in responsive web pages.
With media queries you can define completely different styles for different browser sizes.
Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stack vertically on small screens: ⤴️
A media query can add a "breakpoint" for div containers (which I think Callouts are...), where if the screen is e.g. 800px or smaller it sets width: 100%, meaning multiple div containers floating side by side will now stack one on top of the other as they expand to 100% width of the screen.