I’ve been trying to use Pinegrow’s CSS GUI to get a margin-top to properly work on smaller device widths but I’m not having any luck (see my screen capture). What’s wrong with my CSS code that the smaller widths don’t display with the desired margin-tops?
Can someone direct me to CURRENT step-by-step tutorial of how to consistently get Pinegrow’s CSS GUI to work? This has been driving me nuts since day one of installing PG!
Hi @randyrie,
It is hard to troubleshoot what is going on from a random screenshot. Although you state that the margin-top is not being applied correctly, I’m not sure if other styles have precedent, or if other rules are causing problems. Can you provide a project file or link to a live site?
I’m not sure if this recent tutorial might help with understanding the styling panel. Styling with CSS in Pinegrow – A short tutorial | Pinegrow Web Editor
Cheers,
Bob
@randyrie I could be wrong but you’re view it at 1024px but you’re applying the margin to @media only screen (min-width:320px) and (max-width:768px)
Try changing the view to within these widths and see if it works, if it does then change one or both of them to suit your needs. Hope this helps.
Hi @randyrie,
So, just curious. Is the problem that the media query isn’t being applied as you hoped? Just noticing that you have an inline style set. This will have a higher specificity than almost any rules on the style sheet. The style panel shows the rule that has the highest specificity, so if you have an inline style, that will be displayed.
Cheers,
Bob
