Custom breakpoints

I am just getting started with wappler. I am coming from webflow.

I am used to designing desktop-first. That’s why I need to create breakpoints that are “x and below” instead of “x and above”

Even when I created one in css using max-width, and imported that by Page > manage breakpoints > get from stylesheets, even then the breakpoint that I am seeing in the Style panel is showing it as 990 and up.

Is it possible to design a site desktop-first with pinegrow or am I going to have to design everything mobile-first?

I presume that you have seen this article in the documentation Using media queries and CSS functions to create a responsive design in Pinegrow | Pinegrow Web Editor.

I’m no expert in this field and I always used to work Desktop first and then try and make it fit into mobile. Pinegrow has made me rethink that approach and now I have taken to working mobile first and it’s much easier (it seems to me at least) to scale up rather than down.

You can have both mobile and desktop views open at the same time which again aids the process, as does using Tailwind but I doubt that the latter is really an absolute necessity!

It did take me a while to start thinking mobile first but I can appreciate that there’s a certain logic to working that way.

1 Like

I am very keen on trying pinegrow but re-thinking the whole designing approach is sure daunting. Are you saying that there’s no way to get media queries that act as xxx-or-below ?

I honestly don’t know the answer to that, probably because I haven’t tried.

I’m currently working my way through all aspects of using Pinegrow, and writing up the results as I figure out the way to use it to it’s full potential. With that aspect of my work flow in mind I’ve just found it easier to work with the mobile first approach.

Thanks for the feedback mate.

Hey @NitinWasHere

You can still design desktop-first. You just need to use the traditional media query tool since the new “simple” media query buttons are built around the recommended mobile-first philosophy.

Clicking on the media query button in the visual editor or the “Create new CSS Rule” dialog brings up the more full-featured view that gives you more options and flexibility.
image

image

4 Likes

Thank you very much for the response. Though I was keen on continuing to push with the webflow approach of designing desktop-first, after spending some time getting to know tailwind, I am going to migrate thinking and designing mobile-first and it looks like pinegrow and I are going to be a great fit.

3 Likes