# Custom breakpoints

**URL:** https://forum.pinegrow.com/t/custom-breakpoints/7613
**Category:** General
**Created:** [January 11, 2023, 10:34am UTC](https://forum.pinegrow.com/t/custom-breakpoints/7613 "2023-01-11T10:34:42Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![NitinWasHere](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/nitinwashere/32/5289_2.png) [@NitinWasHere](https://forum.pinegrow.com/u/NitinWasHere)
#### Post date: [January 11, 2023, 10:34am UTC](https://forum.pinegrow.com/t/custom-breakpoints/7613/1 "2023-01-11T10:34:42Z")

</div>

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?

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f9dad86cda0081a76197b8f28ae5f0e19d5754e7.png)

---

<div class="post-metadata">

### Author: ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)
#### Post date: [January 11, 2023, 11:35am UTC](https://forum.pinegrow.com/t/custom-breakpoints/7613/2 "2023-01-11T11:35:33Z")

</div>

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](https://pinegrow.com/tutorials/using-media-queries-and-css-functions-to-create-a-responsive-design-in-pinegrow/).

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.

---

<div class="post-metadata">

### Author: ![NitinWasHere](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/nitinwashere/32/5289_2.png) [@NitinWasHere](https://forum.pinegrow.com/u/NitinWasHere)
#### Post date: [January 11, 2023, 2:05pm UTC](https://forum.pinegrow.com/t/custom-breakpoints/7613/3 "2023-01-11T14:05:37Z")

</div>

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 ?

---

<div class="post-metadata">

### Author: ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)
#### Post date: [January 11, 2023, 2:11pm UTC](https://forum.pinegrow.com/t/custom-breakpoints/7613/4 "2023-01-11T14:11:46Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![NitinWasHere](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/nitinwashere/32/5289_2.png) [@NitinWasHere](https://forum.pinegrow.com/u/NitinWasHere)
#### Post date: [January 11, 2023, 2:32pm UTC](https://forum.pinegrow.com/t/custom-breakpoints/7613/5 "2023-01-11T14:32:22Z")

</div>

Thanks for the feedback mate.

---

<div class="post-metadata">

### Author: ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)
#### Post date: [January 11, 2023, 5:28pm UTC](https://forum.pinegrow.com/t/custom-breakpoints/7613/6 "2023-01-11T17:28:28Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9b5f6dbbe5eedb322c13561c7717f109eec7a26e.png)

![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/5/5577341ecd308109b644e6e7ef64d59dac741396.png)

---

<div class="post-metadata">

### Author: ![NitinWasHere](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/nitinwashere/32/5289_2.png) [@NitinWasHere](https://forum.pinegrow.com/u/NitinWasHere)
#### Post date: [January 12, 2023, 1:10pm UTC](https://forum.pinegrow.com/t/custom-breakpoints/7613/7 "2023-01-12T13:10:49Z")

</div>

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.
