It appears when I am doing media queries to customize for different displays, I need to use the code element “!important” in order for the change to be effective. I know that CSS best-practice discourages the use of !important, but I am unable to find any way around this.
What are your thoughts regarding this matter?
Hi mcaravaglia
Thanks for writing to us.
I suggest you add code with parent class priority. Please check this URL https://codepen.io/sattyag/pen/OJNgzBz where you can see the example code and learn more how to code CSS with parent class priority
Hope it helps you.
Thanks
Thank you for your reply. Perhaps I am missing something? Let me explain more and perhaps you will see where I am going wrong.
In X-Pro page builder, I add a Section, Row, Column and element. I use the settings in the builder to apply margin and padding until I achieve the desired look on my desktop. All is good, so far.
Now, on mobile devices ( and, there are sooo many…) the item needs to be adjusted for each display, so I use CSS Media Queries to make the adjustments. Because the settings in the builder take priority, the only way I seem to be able to override them, to adjust for a specific device, is to use “!important”. Once I use “!important” once, to set for one device, I cannot use it again to adjust for a different device.
What do I need to do to be able to customize for every device independently? There is probably some basic thing I am not understanding here…
Hello @mcaravaglia,
Thank you for such a detailed explanation. Where did you place your @media CSS block? I assume that you have placed it in Appearance > Customize > Additional CSS or anywehere else. Keep in mind that this is the order of the styles being applied:
If you are not following the order, there should be a need to place !important in the code to force the style to be applied and not be overridden with anything else. To assist you better with this issue, would you mind providing us the url of the page in question so that we can inspect it.
Thank you.
Hey @mcaravaglia,
What Ruenel is talking about is CSS Cascade and Inheritance. You can learn that here https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
Knowing how CSS Cascade and Inheriticance works along with CSS Specificity, you’ll be able to diagnose why your CSS doesn’t work and you’ll understand the list Ruenel posted.
An example of CSS Specificity is you add another class or ID to your selector making it more specific. For example, if you want to override an x-masthead style, you place in your child theme #x-site .x-masthead instead of just .x-masthead.
If you need to use !important, that means you have a problem with CSS Cascade and/or specificity.
Regretfully, we do not provide support for custom codes so we cannot investigate nor fix your custom codes. Please consult with a developer if you’re still having problems with your custom CSS.
If you need us to answer more custom CSS questions, please consider signing up to One.
Hope that helps and thank you for understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.