Using the ruler to generate breakpoints

Author Posts

TheBronzePatriot

So far this tool is outstanding. I have nothing but great things to say about it and high recommendations from our clients.

I was curious, and this may exist already, if it was possible to generate a media query off a ruler based location. So for instance, say I have a site and I’m in Microthemer and I switch on the ruler and I drag the ruler to the left and my site starts going responsive but then I notice something appears odd at that particular point and I’d like to first know what point this is at and then create a media query that says “here at this size location” make this change. I understand I can make my own media queries, but it might be interesting to have a more native function for it.

If you’ve ever used Macaw and the responsive nature of creating breakpoints on the fly versus a manual process, it’s similar to how that functions.

Curious if this isn’t possible…what is the best way other than a more manual process?


Sebastian

Hey,

That’s a really good suggestion. And Macaw looks like an interesting tool. I think I would need to spend a bit more time with it. I couldn’t initially see how to set up breakpoints via the ruler.

My initial thought for Microthemer, following your suggestion, would be a right-click option or a small plus (+) icon that appears over the ruler that allows users to create a media query for handling a breakpoint. There would need to be a context menu for specifying min-width vs max-width too.

At the moment, the only way to create custom media queries is via the Edit media queries popup window. The ruler may be useful in showing what screen range the media query should target, but the condition for the media query must be entered manually at the moment.

I’ve put your suggestion, including a link to this forum thread, on our To Do list. If you have any further thoughts on the matter, feel free to post here any time.

Many thanks,
Sebastian

*****UPDATE*****

Media query breakpoints can now be set through the ruler. Read more here:
https://themeover.com/responsive-media-queries/

You must login or register to reply to this topic.