CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
MadPhysicist
MadPhysicist

Reputation: 5841

Conflicting !Important Declarations in CSS

I am making some changes to a CSS template which was written by other developers. There is a place where a certain block gets duplicated. The first version is hidden for the wide-screen display and vice-versa.

I am not sure why it was not possible to utilize just one to do both, but apparently it is somewhat of a common practice. Perhaps it is because this hidden section is displayed as a narrow wide column (using Bootstrap 4) on the right-hand side of the screen, whereas in the mobile version it is displayed above the content in the wide column. But I digress ... Perhaps someone could comment on this bit.

The actual question is as follows.

Suppose we have a class 

@media (min-width: 768px)
.d-md-none {
    display: none!important;
}

What I would like to do is to display it for the print because it is easier to style it rather than the instance of the same block that is meant for the wide screen. So, in the print media styles, I attempt to do something like this

.d-md-none {
  display: block important!;
}

However, I do not see it displayed. What is a prudent course of action here?

Upvotes: 0

Views: 43

Answers (1)

Adam Gonzales
Adam Gonzales

Reputation: 948

Add your print styles at the end of your existing CSS within a rule like so:

@media print {
  ...
}

Also as mentioned by other commenters, you have a typo in your !important declaration (the exclamation goes before the word important).

Upvotes: 2

Related Questions