Dynamic Breakpoints

A no-code solution for dynamic media queries (breakpoints)

Frameworks like Bootstrap provide responsive breakpoints in reasonable places to cover just about every device out there. Blocs UI for breakpoints is superb. It’s one of the strongest features of the software. But sometimes using a media query can be a valid or even the best solution to a build. Professionals use media queries to solve complex layout issues and push the UX standards forward through techniques like responsive design and progressive enhancement. And oh yeah, it also let’s you do things in bulk –make sweeping responsive design changes across a page or site. Dynamic Breakpoints (formerly Media Query for Blocs) is the perfect companion to what Blocs/Bootstrap provides.

Dynamic Breakpoints is sneaky powerful. It doesn’t just define the media queries, it both adds and removes your custom defined classes from any target element as well.

With Dynamic Breakpoints for Blocs you can add additional breakpoints where you need them, stack as many queries as you need!

What can I do with these additional “breakpoints”?

You assign a custom CLASS and a TARGET element. The class will be added and removed from the element as the query is in and out of range respectively.

Use the Class Manager to create this new class and style it anyway you like, including completely hiding the element. As your style gets both added and removed based on the query, you get powerful control and another responsive design aid in your toolbox.

Key Features

That said, there are 3 different methods of detection for your queries.

Detection Methods:
  • Parent container’s width
  • Device or viewport orientation
  • Image treatments at different breakpoints.
Device Notice: (optional)

Elegant little device notice that tells your visitors when the content is best viewed expanding browser or rotating device. The overlay and text can be completely customized and this notice fades away after a few seconds.

Inverse behavior

By default the class is added to the target element when the media query is within range. It’s removed when the query is out of range. The inverse checkbox will switch the behavior. Now the class you provide will be remove from the target element when the media query is within range. It’s added to the target when the query becomes out of range.

Some uses include
  • Showing/hiding content for specific breakpoints and custom ones.
  • Styling fonts for specific breakpoints.
  • Making project-wide tailorings based on break points.
  • Notify users when content is best viewed by rotating their device or expanding viewport/browser.
  • Do things in bulk. Make sweeping responsive design changes across a page or site.

Visit this topic in the Blocs community forum.

Don’t have Blocs? Try it Free

Sign up for product release news, updates and tutorials.

Twitter: @blochead_dev


Product details

  • Blocs 3 Minimum
  • 20th October 2020
  • Bootstrap 5
  • 7th February 2023
  • 1.1
Buy Dynamic Breakpoints$30 Live Preview View