Smaller updates to responsive character CSS grid

This commit is contained in:
Justin Edmund 2023-01-02 04:28:13 -08:00
parent 36fe175f8f
commit feb3b6c2ca
2 changed files with 26 additions and 9 deletions

View file

@ -76,4 +76,10 @@
}
}
}
.CharacterName {
@include breakpoint(phone) {
font-size: $font-tiny;
}
}
}

View file

@ -1,14 +1,20 @@
#Job {
box-sizing: border-box;
display: flex;
margin-bottom: $unit * 3;
margin-bottom: $unit-3x;
width: 100%;
@include breakpoint(tablet) {
align-items: center;
flex-direction: column;
gap: $unit;
justify-content: center;
max-width: 447px;
// prettier-ignore
@media only screen
and (max-width: 800px)
and (max-height: 920px)
and (-webkit-min-device-pixel-ratio: 2) {
align-items: center;
flex-direction: column;
gap: $unit;
justify-content: center;
width: 100%;
// max-width: 447px;
}
select {
@ -60,8 +66,13 @@
width: $width;
transition: box-shadow 0.15s ease-in-out;
@include breakpoint(tablet) {
margin-right: 0;
// prettier-ignore
@media only screen
and (max-width: 800px)
and (max-height: 920px)
and (-webkit-min-device-pixel-ratio: 2) {
margin-right: 0;
width: 100%;
}
@include breakpoint(phone) {