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?
Hi @NotAnotherName,
Sorry for your troubles. Can you post a video? Or at least some screenshots?
Bob
Welcome to the forum @NotAnotherName.
Your general description sounds relative and reminds me of this previous thread regarding workflow.
1 Like
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.
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 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
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.
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
2 Likes
Cool, it worked, thanks!
Still have to ponder exactly why, but anyway thanks for the support.
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.
1 Like