How to resize an HTML block like an image with CSS Container Queries!

You know what’s cooler than using an image when building a website? How about making something with HTML and CSS that looks and acts like an image? And you know what, this is super easy now with container queries.

In this video we’re gonna to take an advertisement built in HTML and then we’re going to make it look and act like an image as it get squished, expanded, and moved to other locations within the document.

Along the way we'll discover how to set up a container, the foundation of container queries, and we'll look at container query units and learn how to use them. Ok, let’s check it out.

------------------------------------------------------------------------------

🔗 Demo Link:

------------------------------------------------------------------------------

📖 Chapters:
0:00 – Introduction
0:30 – Some downsides to using images and viewport units
2:10 – Setting up a container with the CSS container-type property
2:32 – Using CSS container query units
3:20 – Using the CSS max function to prevent borders from getting too thin when using dynamic units
4:28 – How the CSS padding-block logical property works

------------------------------------------------------------------------------

#css #html #coding