Media Queries Based on Element Width with MutationObserver | Responsive Web Design

Media Queries Based on Element Width with MutationObserver

You have probably faced a situation before where you really wished CSS media queries were based on elements’ width rather than the entire viewport. This article explores a JavaScript approach to add different attributes to an element depending on its width using resize event and MutationObserver.
Media Queries Element MutationObserver

You have probably faced a situation before where you really wished CSS media queries were based on elements’ width rather than the entire viewport. In this article we will explore a JavaScript approach to add different attributes to an element depending on its width using resize event and MutationObserver. You can then use these attributes to style the element differently in your CSS.

An excerpt from Media Queries Based on Element Width with MutationObserver

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.