Created by: juthilo
This change prevents situations where specificity causes some rules to be overridden by the ones intended for mobile.
- Added mixin
responsive-invisibility()
- Swapped out
display: none !important;
for new mixin inresponsive-utilities.less
What does this fix? Scenario
Viewport matches desktop media query. The tag in question is a td.visible-sm
.
-
Table cell would be visible on mobile.visible-sm { display: block !important; }
-
Media query kicks in, table cell would be hidden on desktop.visible-sm { display: none !important; }
-
td.visible-sm { display: table-cell !important; }
Other rules overridden due to specificity in rules for phone. Table cell unintentionally visible on desktop