Responsive Web Design lets us adapt to the size of our screens, but how do we adapt an element to the size of its container? Gutenberg blocks can appear in narrow columns, widescreen, or (soon) in sidebars or footers, each container a different width and context. A way to write Container Queries to handle these situations has topped the Responsive Design wish list for years—but unfortunately, they’re not coming any time soon, and may even be impossible with CSS alone.
But this is Boston, the “home town” of responsive styling; we don’t let the impossible stop us!
In this session we’ll discover how to roll our own efficient, container-aware styling with the JavaScript ResizeObserver object, using code that works in all major browsers. With only a few lines of HTML & CSS we can make our blocks look superb wherever they appear on the page!