⌨️ Container Query Units in CSS!!

This example demonstrates how container query units offer more control over fluid typography compared to viewport-based units (vw).

⌨️ How to check if Hovering is supported

If you are adding hover styles to elements in your web page, here is a feature you can use to filter out devices that are actually hover capable!

✨ For example: mobile devices with a touch screen don't support hover.

🔅 Level Up: CSS Layout

🌐 Author: Morten Rand-Hendriksen
🔰 Level: Intermediate

⏰ Duration: 1h 26m

🌀 Find out how well you know CSS Layout techniques, and maybe learn more along the way!

📗 Topics: CSS Grid Layout, Cascading Style Sheets

📤 Join Webdev Training for more courses

📱Webdev Training
📱Level Up: CSS Layout

⌨️ Flexbox auto-margin

For aligning items of a flexbox along the cross axis, we have the align-self property. Have you wondered why we don't have an equivalent justify-self for flexbox? 🤔

It is because justifying an individual item doesn't make that much sense. What happened to the neighboring elements, let's say, if you apply justify-self: end to an element?

👉 Instead CSS allows you to define the value 'auto' for margin to create this desired effect.

When you define margin: auto, it means, create a margin that is as large as the available free space.

This helps us to kind of push the element away from all the other elements in the flexbox!