granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Smaller updates to responsive character CSS grid

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/CharacterUnit/index.scss
View file

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

29
components/JobSection/index.scss
View file

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