Media Query. Without using !important

Question

Hi can anyone help me with this I'm having a problem when it comes to a media query CSS. I'm trying to make my div 70% on certain width of the screen. However, when checking it on the browser it's not working. But, when I'm using !important it's working fine. However, my goal is not to use !important. Can anyone help me? Thanks

Answer 1

• In CSS, rules are overridden by rules with the same specificity occurring later in the same stylesheet (and in document-order when multiple external stylesheets are loaded into a HTML document or with @import).
• Now, consider that:
  • Your @query-wrapped rule is on line 2679.
  • Your "normal" rule is on lines 3110 and 3157.
  • Therefore your normal rules will always override the @query rule because it has the same specificity unless you use !important.
• Therefore, either:
  • Make the @query rule more specific. or...
  • Keep on using !important. or...
  • Move your @query rules to the bottom of your stylesheet.