Jump to navigation
Jump to search
(fix mobile margins) |
m (fix) |
||
Line 65: | Line 65: | ||
} | } | ||
@media all and (min-width: | @media all and (min-width: 720px) { | ||
.game-infobox-container > .infobox { | .game-infobox-container > .infobox { | ||
margin-top: -0.5em; | margin-top: -0.5em; |
Revision as of 09:38, 16 May 2023
.game-infobox-container {
display: grid;
grid:
"boxart ad" auto
"boxart ibox" auto
/ 1fr 1fr;
gap: 10px;
width: 100%;
}
.game-infobox-container > .desktop-300-right {
grid-area: ad;
place-self: start end;
margin: 0;
height: 250px;
width: 300px;
}
.game-infobox-container > .floatleft {
grid-area: boxart;
justify-self: center;
margin: 0;
padding: 0;
width: 100%;
max-width: 300px;
}
.game-infobox-container > .floatleft img {
height: auto;
width: 100%;
max-width: 300px !important;
}
.game-infobox-container > .infobox {
grid-area: ibox;
align-self: start;
justify-self: end;
margin: 0;
min-width: 300px;
}
.img-ib-inline {
padding-right: 0.3em;
}
.img-greyscale {
filter: grayscale(100%);
}
@media all and (max-width: 719px) {
body.skin-timeless .game-infobox-container {
grid:
"ad" auto
"boxart" auto
"ibox" auto
/ auto;
}
body.skin-timeless .game-infobox-container > .desktop-300-right {
justify-self: center;
}
body.skin-timeless .game-infobox-container > .floatleft {
width: 300px;
}
}
@media all and (min-width: 720px) {
.game-infobox-container > .infobox {
margin-top: -0.5em;
}
}
@media all and (min-width: 1176px) {
.game-infobox-container {
grid:
"boxart ibox ad" auto
/ 250px minmax(300px, auto) 300px;
}
.game-infobox-container > .infobox {
width: auto;
justify-self: stretch;
}
.game-infobox-container > .floatleft {
width: auto;
}
.game-infobox-container > .floatleft img {
width: auto;
max-height: 250px !important;
}
}