Help Center

Powered by Minitek FAQ Book

Why do you have !important for the CSS colors for small screens in this code? My override does not work.

Net-ConfigPosted 7 months ago

Hi there,

I have a color styling override for the article titles in details boxes on this page:


For mid to large size windows / screens, I get the blue override color for the linked title that I want, so it matches titles elsewhere on the site.

I realized that on small screens, Minitek Wall code takes over, that looks like this:


@media only screen and (min-width: 719px) and (max-width: 938px)
#mwall_items_6 .mwall-detail-box h3.mwall-title a,

#mwall_items_6 .mwall-detail-box h3.mwall-title span {
  color: rgba(82,82,82, 0.9) !important; }


As soon as you have a window where only two detail boxes show, this happens. 

The !important in the inline code prevents me from me using an !important to maintain my preferred link color for the smaller screens.

I learned here that when two !important clauses are in effect, the inline code one wins.

Is there really a need to use the !important inline one here, or can you remove it for these screen sizes?


The ability to customize styling across all display modes seems important, so want to ask the question.




2 answers

MinitekPosted 7 months agoEdited 7 months agoModerator

Yes, the !important rules are necessary for the stylings to work properly

If you want to override them, you can add a Layout > Class suffix to the widget and then add your own !important css rules by using the suffix in the css.

Net-ConfigPosted 7 months ago

Ok, have not done things like that before but will try.