Hello,
so I have a CSS grid and I am trying to modify this grid conf when it hits a certain media query.
What I do is what follows:
Under the Style panel, I duplicate my grid. Select this new duplicated grid and under the " Selector and media queries " I set it to smaller than 1024px.
Hi @red-rosefields,
Do you have a screenshot of the rules displayed in Active tab in the Style panel with the Page View set to a size less than 1024px? I suspect we will see that the order of the rules will be the @media rule being displayed second.
This actually means that it was loaded in before the non-media query rule for the element. The rule higher up in the Active tab will be loaded later by the browser. Since both rules would apply at screen sizes smaller than 1024px, the rule loaded last wins. So, to solve this, you would have to reorder your rules to make sure your media query is at the end of your stylesheet (or at least after the initial rule). You can do that either in the code editor, or by clicking on the stylesheet dropdown in the Style panel, selecting the stylesheet by clicking on the name to open it is a new tab, and finally using the drag bars to the right of the rule name to move them either up or down.
The trick to adding media queries in Pinegrow is that after you duplicate the rule, you want to select the rule that is higher up in the Active tag before adding the media query. That way it always comes after the original ruleset.
Let me know if this solves it or I am completely wrong!
@RobM Thank you so much for the help! That fixed my issue.
The trick to adding media queries in Pinegrow is that after you duplicate the rule, you want to select the rule that is higher up in the Active tag before adding the media query.
