Further adjusted mobile styles
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
97065e8f1c
commit
20277268b5
|
@ -23,20 +23,12 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.subBox {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.subBoxLeft {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.container {
|
||||
justify-content: center;
|
||||
}
|
||||
.arrow {
|
||||
width: 250px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
||||
.item:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
@ -66,4 +58,38 @@
|
|||
|
||||
.left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.subBox {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.subBoxLeft {
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.item {
|
||||
font-size: calc(20rem / 16);
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.container {
|
||||
justify-content: center;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
|
@ -42,9 +42,9 @@ interface ArrowProps {
|
|||
function Arrow({ isPointRight }: ArrowProps) {
|
||||
return (
|
||||
<svg
|
||||
width="250px"
|
||||
height="20px"
|
||||
className={isPointRight ? styles.right : styles.left}
|
||||
className={
|
||||
(isPointRight ? styles.right : styles.left) + " " + styles.arrow
|
||||
}
|
||||
>
|
||||
<defs>
|
||||
<marker
|
||||
|
|
Loading…
Reference in New Issue