# Massive problem with managing/applying breakpoints

**URL:** https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187
**Category:** Styling (CSS)
**Created:** [April 6, 2021, 8:43pm UTC](https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187 "2021-04-06T20:43:19Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![NotAnotherName](https://avatars.discourse-cdn.com/v4/letter/n/b4bc9f/32.png) [@NotAnotherName](https://forum.pinegrow.com/u/NotAnotherName)
#### Post date: [April 6, 2021, 8:43pm UTC](https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187/1 "2021-04-06T20:43:19Z")

</div>

Hi, I have a major problem using breakpoints to manage adaptive stylings for my pages. Usually I try to open the XS view, activate the brush so (in theory) the CSS should only affect this size. I choose the item I want to style add the breakpoint and look out it’s displayed in the style tab. When I start styling it ALWAYS changes in the wrong sized windows or in both even if the breakpoint is specifically chosen for the XS view or at least for the size where it should be active. I don’t know what to do. Any suggestions?

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 6, 2021, 9:54pm UTC](https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187/2 "2021-04-06T21:54:02Z")

</div>

Hi @NotAnotherName,  
Sorry for your troubles. Can you post a video? Or at least some screenshots?  
Bob

---

<div class="post-metadata">

### Author: ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [April 7, 2021, 2:00pm UTC](https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187/3 "2021-04-07T14:00:40Z")

</div>

Welcome to the forum @NotAnotherName.

> [@NotAnotherName](#):
>
> activate the brush so (in theory) the CSS should only affect this size

Your general description sounds relative and reminds me of this previous thread regarding workflow.

> [@Select active view for CSS editing](https://forum.pinegrow.com/t/select-active-view-for-css-editing/4198):
>
> I probably got this all wrong, but I thought selecting the little brush “Active View for CSS Editing” meant that any CSS additions, alterations, or deletions would affect ONLY that device size (@media) and not affect any of the other sizes unless the brush was de-selected. But seemingly this is not the case… or is it and I’m doing something wrong? [ActiveView|678x196](https://forum.pinegrow.com/uploads/short-url/lnMthYeapE1zBqLzh3uoXQ3z8aI.jpeg)

---

<div class="post-metadata">

### Author: ![NotAnotherName](https://avatars.discourse-cdn.com/v4/letter/n/b4bc9f/32.png) [@NotAnotherName](https://forum.pinegrow.com/u/NotAnotherName)
#### Post date: [April 7, 2021, 5:36pm UTC](https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187/4 "2021-04-07T17:36:19Z")

</div>

Hey, here are some screenshots. The media query affects the small size BUT it also changes the font of the large size and it does not change back whatsoever.

 ![ContactSheet_001](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/909e41821fc61f5532d804ceb6fa8698d0f84fe2.jpeg)

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 7, 2021, 8:00pm UTC](https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187/5 "2021-04-07T20:00:10Z")

</div>

Hi @NotAnotherName,  
Wow, that is odd. I think we might need to follow this up as a support ticket \> Go to [Contact Us | Pinegrow Web Editor](https://pinegrow.com/contact-us/) for details about how to contact the support team.

Can you also post just one more screenshot? With everything the same as the last screenshot, scroll back up to the very top of the visual editor.  
Thanks,  
Bob

---

<div class="post-metadata">

### Author: ![NotAnotherName](https://avatars.discourse-cdn.com/v4/letter/n/b4bc9f/32.png) [@NotAnotherName](https://forum.pinegrow.com/u/NotAnotherName)
#### Post date: [April 8, 2021, 4:51am UTC](https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187/6 "2021-04-08T04:51:16Z")

</div>

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

---

<div class="post-metadata">

### Author: ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [April 8, 2021, 9:15am UTC](https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187/7 "2021-04-08T09:15:11Z")

</div>

Hi @NotAnotherName,  
Just had an AhhHaa moment. Guess I needed to sleep on it.  
You text changing at the larger screen size isn’t the result of adding styling to the larger screen, but rather taking styling away.

I’m assuming that you are creating the breakpoint styling by clicking on the ruleset - `.blog-header-logo` and then within the Visual Editor clicking on the “Media Query” button and selecting the “smaller than 576” button. That has the effect of removing that styling from the logo on the larger screen. When you click the “Media Query” button Pinegrow doesn’t duplicate the rule, it just adds the media query to the rule. If you look at the header logo on a large screen you will see that it has a computed size of 16px - this is inherited from the 1rem set on the body.

So the correct way to do this is to first right-click the rule-set that you want to modify with your media query and select “duplicate” from the context menu.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/2196434f572cff6e8bc8643314321e95744aa514.png)  
Then choose the first rule from the list (this maintains cascade order on the stylesheet) and select your breakpoint. Style away and it will only impact the page you expect!  
Let me know if this was helpful/solved your problem,  
Bob

---

<div class="post-metadata">

### Author: ![NotAnotherName](https://avatars.discourse-cdn.com/v4/letter/n/b4bc9f/32.png) [@NotAnotherName](https://forum.pinegrow.com/u/NotAnotherName)
#### Post date: [April 8, 2021, 8:13pm UTC](https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187/8 "2021-04-08T20:13:38Z")

</div>

Cool, it worked, thanks!  
Still have to ponder exactly why, but anyway thanks for the support.

---

<div class="post-metadata">

### Author: ![creativedaz](https://avatars.discourse-cdn.com/v4/letter/c/e9c0ed/32.png) [@creativedaz](https://forum.pinegrow.com/u/creativedaz)
#### Post date: [September 3, 2022, 10:23am UTC](https://forum.pinegrow.com/t/massive-problem-with-managing-applying-breakpoints/5187/9 "2022-09-03T10:23:10Z")

</div>

When you clicked the “Large”, and applied the media query. It simply moved the CSS Rule of “Large” to the media query so the style for XL device is gone. The trick is, you need duplicate the CSS Rule, and apply the media query on the duplicate. Hope this clears your mind.
