Template:Infobox election/styles.css: Difference between revisions
Appearance
Content deleted Content added
Hide for screen readers using new class infobox-election-row-hidden |
Limit to <= tablet breakpoint |
||
Line 14: | Line 14: | ||
/* To avoid seeming biased on responsive skins - make sure all images are the same width and displayed e.g. not hidden by a scrollable element */ |
/* To avoid seeming biased on responsive skins - make sure all images are the same width and displayed e.g. not hidden by a scrollable element */ |
||
/* {{pp-template}} */ |
/* {{pp-template}} */ |
||
@media all and ( min-width: |
@media all and ( min-width: 6400px ) { |
||
body.skin--responsive:not( .skin-monobook ):not( .skin-timeless ) .infobox { |
body.skin--responsive:not( .skin-monobook ):not( .skin-timeless ) .infobox { |
||
min-width: 460px; |
min-width: 460px; |
||
Line 20: | Line 20: | ||
} |
} |
||
@media all and ( max-width: 640px ) { |
|||
body.skin--responsive:not( .skin-monobook ):not( .skin-timeless ) .infobox .notpageimage.noresize img { |
body.skin--responsive:not( .skin-monobook ):not( .skin-timeless ) .infobox .notpageimage.noresize img { |
||
height: 80px !important; |
height: 80px !important; |
||
width: auto; |
width: auto; |
||
} |
|||
} |
} |
Revision as of 02:36, 15 June 2024
/* Row hidden for users, show to screen readers */
.infobox-election-row-hidden {
display: block;
position: absolute !important; /* stylelint-disable-line declaration-no-important */
clip: rect( 1px, 1px, 1px, 1px );
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
}
/* To avoid seeming biased on responsive skins - make sure all images are the same width and displayed e.g. not hidden by a scrollable element */
/* {{pp-template}} */
@media all and ( min-width: 6400px ) {
body.skin--responsive:not( .skin-monobook ):not( .skin-timeless ) .infobox {
min-width: 460px;
}
}
@media all and ( max-width: 640px ) {
body.skin--responsive:not( .skin-monobook ):not( .skin-timeless ) .infobox .notpageimage.noresize img {
height: 80px !important;
width: auto;
}
}