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. Media Query is the perfect companion to what Blocs/Bootstrap provides.
Media Query for Blocs 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 Media Query for Blocs you can add additional breakpoints where you need them, stack as many queries as you need!
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.
That said, there are 3 different methods of detection for your queries.
- 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.
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.
We've updated our website. visit us at:
Media Query : https://blochead.dev/media-query
Media Query Demo : https://blochead.dev/media-query-demo
Follow me for product release news, updates and tutorials.