Well, there are actually two questions going on here - I can show you how to do one of them and give a suggestion for the other.
Question one - How to add media queries
So if we have a button that we want to have different styling on mobile, we can select that button and add a class to it using the property panel - With the button selected on the page or in the tree, click on the sliders icon, this is the Properties panel
Click the “+ Add class” button and then type a class into the pop-up - like “color-change” and click “Add class”
Next click the paintbrush icon to open the Style panel then click the button with three dots next to the “Create” button
This will bring up a CSS selector chain. First click on your new class - you can also click on button to add more specificity if you need. Then click on the “Media Query” button to open the possibilities based on the current page breakpoints
Finally click on the “Create” button
This will add your media-query to your style sheet - but here is the gotcha that tricks most beginners to Pinegrow. In order for that rule-set to show up for adding styles, you need to have your Page View set to a size where that rule is active. The Style panel only shows the active rules for an element. If you page view is larger than your media query, it won’t show up!
To change the page view size, click on the down caret in the upper left and select a size from the dropdown, or type directly in the size box at the top of the page view
If you have multiple page views, make sure that the paintbrush at the upper right is clicked. This will identify which view you are styling.
Hope this helps