How can I create media query correctly?

[simonzhang]

Hi guys,

I am new to pinegrow and frontend.
I like to use the tree panel to add bootstrap class to a component.
When I need to add media queries, I find it does not work.
I find that I can use style panel to create a class and add a media query to this class.
I am not sure this is the only way to write CSS.
How can I just add bootstrap class in a media query.

[simonzhang]

For example, if I want to change a bootstrap button’s color from primary to success when browser size change from desktop to mobile. How can I do it.

I am new to frontend and pinegrow.
If my question is dummy, I am sorry.
Everyone starts from a beginner, please help me.

[RobM]

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.

Question 2) adding color changes in Bootstrap utilizing the existing color variables isn’t possible with plain CSS, you have to use SASS. Your alternatives are to either copy the color code you want from the Bootstrap CSS rather than refering to it as the name (primary), or add the class you want by JavaScript.

Hope this helps
Bob

[simonzhang]

Thank you very much.

I love you.

[simonzhang]

Thank you very much.

I love you.

[RobM]

My pleasure - glad I could help!