I'm currently revamping a CSS template created by previous developers. I've noticed that a specific block is duplicated, with one version hidden for wide-screen display and the other hidden for smaller screens.
It's unclear why two separate blocks were used instead of one that can serve both purposes, but it seems to be a common practice. The hidden section appears as a narrow column on the right side of the screen in wide-screen mode, but switches to display above content in the mobile version. Perhaps someone can shed some light on this.
Now onto the main question at hand.
Let's say we have a class:
@media (min-width: 768px)
.d-md-none {
display: none!important;
}
I want to display this block for print styling purposes, as it's easier to work with than the version meant for wide screens. So, in the print media styles, I've tried the following:
.d-md-none {
display: block important!;
}
However, I'm not seeing it displayed as expected. What would be the best course of action to take in this situation?