Disable automatic media query for Tailwind CSS


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.

Welcome to the community @INTERNET_PEASANT.

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

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.

Welcome to Pinegrow!!!

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

I think your answer is here:

I tried this solution, both enabled and disabled. However, neither stopped pinegrow from automatically setting breakpoints. I’ve attached a .gif showing the issue
I want to be able to drag that resizer without changing the breakpoint

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

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

1 Like

@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.

1 Like

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.


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

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.

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?

1 Like