Media queries official documentation?

Hello, is there any official doc on creating media queries in pg 4/5? Specially getting the grid responsive with media queries…
I Found I video on the YouTube channel but it is quite old as it was made on PG2 I guess.
Thanks all

I think I am starting to understand how to work with @media in PG… (though I still miss the official documentation) Does anyone else find the handling of media queries awkward? Actually I ended up with manually writting the queries using VS …copy/pasting elements under @media and styling them there is a much more faster way… weird

so cold in here…:frowning:

1 Like

I’m long stalking this thread now, didn’t have an answer though. Reason being, that I don’t have one - I mean neither an answer nor bigger problems dealing with media-queries.

The documentation is the biggest point of discussion these days - admittedly, it’s not complete and out-of-date. But does PG require a chapter of “What is Media Query? Why has it been created? What’s the gist of it?”. Perhaps it does - perhaps not.

For sure, I like the idea, that PG should detect an already-existing media query and drag other stuff beyond it (rather than creating same breakpoints for each style over and over again). On the other hand, this practice sounds a bit like: device-agnostic - which is wrong anyway.

Don’t take me wrong here, but could you perhaps describe your problems more in detail? This could help refining answers and documentation.



I believe that if you have in your hand a robust and complex tool such as PG, documentation should be at the very base of the product/users interaction relation. Even more when the product evolves and gets better with such impressive speed.

My question was how to work with media queries with-in PG, not how to work with media queries in general. It is, of course, given you already understand the topic hence have some degree of css-html understanding.

Now, I encountered no problem while dealing with media queries other than spending significant time tinkering around because of the poor documentation.

Having said that, I sincerely found the very process of creating mediaQ over and over and over again and moving things under them and re-creating classes and so on… desperately time-consuming.

Because of this, I decided to go manual on breakpoints, using a code editor. But then I had to reorganize quite many lines over there… So i though… PG should do this for me… It shoud not be faster to manually write you breakpoints… But it was… and asking around among other pg users I found I was not the only one to have this appreciation on the matter.

Having the app to do this for you would be a nice feature, not device-agnostic but in an intelligent way. You work on a certain mq and pg detects and move things over there. It’s just faster… at the end of the day people use frameworks for this same reason.

Salute and thanks!

Absolutely. But you know what? As someone who created his own Plugin (not having any clue about js - a bit trial and error), I’m waiting on PlugIn-dev documentation (since V3 to be pedant).

As far as I know (or am I under the wrong impression), you don’t use any framework? If so, I’m with you anyway. From scratch in PG in fact means from a blank white paper without any interface-help. For me a bit too much “blank canvas”. One of the reason I’ll (perhaps) stop actively (monetary) support PG in future. I’m not in any need of frameworks - and I don’t pay their dev. I simply expect a bit more empathy into the basics (such as your media-query approach, commenting … I have some more ideas).

This sounds very pretentious (and is - some kind of :slight_smile: ):

For having an excellent control above design and responsiveness is one of the reasons I started to write my own framework (way before I even knew of Pinegrow). I named it “Reginald”, but that doesn’t matter at all. But it was a perfect fit in PG, cause it extends the UI up to my needs.


  1. Based on Flexbox
  2. Mobile first
  3. From 500px (min)-2000px (max) - each 100px adjustable - 6 col
  4. Has adaptive FONTs by default

and some goodies more. It’s only one of several possibilities extending PG up to your needs - and this in fact, is unique in application’s landscape. Very fascinating.



1 Like