diff --git a/resources/skins.minerva.content.styles/tables.less b/resources/skins.minerva.content.styles/tables.less index 7ebea51..c349237 100644 --- a/resources/skins.minerva.content.styles/tables.less +++ b/resources/skins.minerva.content.styles/tables.less @@ -3,6 +3,24 @@ @import 'minerva.variables.less'; @import 'minerva.mixins.less'; +// These are only intended for smaller screens. +// This avoids having to undo them from another media query, +// by putting the original in a media query instead. +// This also avoids having a reset with too-high specificity, which +// would break unrelated styles from core and extensions. +@media all and ( max-width: @width-breakpoint-tablet ) { + .content { + table { + display: block; + width: 100% !important; + } + + caption { + display: block; + } + } +} + .content { table { margin: 1em 0; @@ -11,11 +29,8 @@ overflow: auto; /* for browsers that don't support overflow-y */ overflow-y: hidden; overflow-x: auto; - display: block; - width: 100% !important; caption { - display: block; text-align: left; } diff --git a/resources/skins.minerva.tablet.styles/common.less b/resources/skins.minerva.tablet.styles/common.less index 86b5e28..f3effd0 100644 --- a/resources/skins.minerva.tablet.styles/common.less +++ b/resources/skins.minerva.tablet.styles/common.less @@ -90,13 +90,9 @@ A file for css that optimises the Minerva skin on larger devices. } } - // Override rules in common.less table { - display: table; - width: auto !important; caption { background: inherit; // T170344 - display: table-caption; } tbody { display: table-row-group;