# Disable automatic media query for Tailwind CSS

**URL:** <https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895>\
**Category:** Beginners\
**Tags:** tailwind\
**Created:** [September 4, 2022, 4:09pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895 "2022-09-04T16:09:42Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![INTERNET\_PEASANT](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/internet_peasant/32/4677_2.png) [@INTERNET\_PEASANT](https://forum.pinegrow.com/u/INTERNET_PEASANT)\
**Post date:** [September 4, 2022, 4:09pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/1 "2022-09-04T16:09:42Z")

</div>

Hello,

I’m working with a tailwind CSS project. Inside the editor I want to view the drag & drop canvas at a larger size. However, when I try and drag the canvas to make it larger. Pinegrow is setting the media query breakpoints automatically. I simply want to view a larger canvas without changing the current breakpoint.

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

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [September 4, 2022, 11:53pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/2 "2022-09-04T23:53:59Z")

</div>

Welcome to the community @INTERNET_PEASANT.

You can simply resize the page view manually to any size.

---

<div class="post-metadata">

**Author:** ![INTERNET\_PEASANT](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/internet_peasant/32/4677_2.png) [@INTERNET\_PEASANT](https://forum.pinegrow.com/u/INTERNET_PEASANT)\
**Post date:** [September 5, 2022, 3:18pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/3 "2022-09-05T15:18:51Z")

</div>

Hello and thank you for your response.

The issue I’m having is when I’m manually dragging the page to resize it. Pinegrow will automatically set the tailwind breakpoint. Forcing me to use that breakpoint.

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [September 5, 2022, 3:28pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/4 "2022-09-05T15:28:07Z")

</div>

Welcome to Pinegrow!!!

I think what you want is the Zooming (-) 100% (+) at the top left of the central controls?

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

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 5, 2022, 3:35pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/5 "2022-09-05T15:35:08Z")

</div>

I think your answer is here:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/159a5cf7f3e2a0a636a74bd7f9b58a60d9169e2b.jpeg)

---

<div class="post-metadata">

**Author:** ![INTERNET\_PEASANT](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/internet_peasant/32/4677_2.png) [@INTERNET\_PEASANT](https://forum.pinegrow.com/u/INTERNET_PEASANT)\
**Post date:** [September 5, 2022, 4:16pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/6 "2022-09-05T16:16:49Z")

</div>

I tried this solution, both enabled and disabled. However, neither stopped pinegrow from automatically setting breakpoints. I’ve attached a .gif showing the issue  
 ![Video_2022-09-05_120719_edit](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/430cd1b4556fb69db41f30e7ddb9d46f921f0b24.gif)  
I want to be able to drag that resizer without changing the breakpoint

---

<div class="post-metadata">

**Author:** ![INTERNET\_PEASANT](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/internet_peasant/32/4677_2.png) [@INTERNET\_PEASANT](https://forum.pinegrow.com/u/INTERNET_PEASANT)\
**Post date:** [September 5, 2022, 4:18pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/7 "2022-09-05T16:18:41Z")

</div>

@Emmanuel I’ve tried this solution. However, this did not resolve my specific issue. I replied to @fakesamgregory with a .gif showing my issue

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [September 5, 2022, 4:31pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/8 "2022-09-05T16:31:02Z")

</div>

This is how websites work. What do you expect to happen when you do that? A gutter?

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [September 6, 2022, 1:04am UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/9 "2022-09-06T01:04:07Z")

</div>

@INTERNET_PEASANT in that view, PG doesn’t change the breakpoint (for example changing SM from 992 to 1024). It simply resizes the page view (browser) and displays which breakpoint is active at that size.

---

<div class="post-metadata">

**Author:** ![INTERNET\_PEASANT](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/internet_peasant/32/4677_2.png) [@INTERNET\_PEASANT](https://forum.pinegrow.com/u/INTERNET_PEASANT)\
**Post date:** [September 10, 2022, 10:02pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/10 "2022-09-10T22:02:14Z")

</div>

You’re missing my question completely with unnecessary sarcasm. I’m learning this software. I’m not learning web development.

- I want to **see more screen** - That’s it.
- When I drag the slider to **see more screen** …
- Pinegrow is setting Tailwind responsive functionality **`class=sm:`** , **`class=md:`** , **`class=lg:`** and so on - automatically.
- I _do not_ want that to happen. I simply want to **see more screen**.

If you understand Tailwind CSS. Then you’d understand, responsive functionality isn’t always necessary. So why is Pinegrow forcing Tailwind CSS break points - when resizing the screen.

I doubt any help is coming out of this thread, but I felt inclined to respond to your sarcasm.

Thanks guy.

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [September 11, 2022, 2:00am UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/11 "2022-09-11T02:00:19Z")

</div>

Hi @INTERNET_PEASANT,

> [@INTERNET\_PEASANT](#):
>
> Pinegrow is setting Tailwind responsive functionality **`class=sm:`** , **`class=md:`** , **`class=lg:`** and so on - automatically.

Are you seeing these sizing utilities added to your element’s attributes (in the props panel) when you resize your page?

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [September 11, 2022, 2:12pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/12 "2022-09-11T14:12:53Z")

</div>

Honestly, no sarcasm. Just trying to understand what you’re picturing in your head so that I can potentially help you better.

I think you thought it was sarcasm because my message was short? I literally didn’t want to convolute my message with any more assumptions or suggestions until I had a clearer answer.

---

<div class="post-metadata">

**Author:** ![fakesamgregory](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/fakesamgregory/32/3903_2.png) [@fakesamgregory](https://forum.pinegrow.com/u/fakesamgregory)\
**Post date:** [September 11, 2022, 2:20pm UTC](https://forum.pinegrow.com/t/disable-automatic-media-query-for-tailwind-css/6895/13 "2022-09-11T14:20:35Z")

</div>

Saying that, your response does help and I think I understand you better.

I _think_ what you’re asking for isn’t a solution for Pinegrow, it’s in the way you’re building your site. You have styles set on your website at different breakpoints, therefore they will be seen when you resize the window. That’s the only information Pinegrow has to know how to present your website when it’s rendered on a window of that size. You need to remove that styling within the breakpoints yourself if you’ve used a framework or just not create that styling if from scratch.

Pinegrow is showing you a rendered preview of what’s written in the code. It’s not doing anything extra if that makes sense?
