scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add mobile design for details form

Browse Source
This commit is contained in:
Christel Westerberg
2024-11-18 13:13:41 +01:00
parent 117cbcd20d
commit 4c9e9de113
4 changed files with 57 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/HotelReservation/EnterDetails/Details/details.module.css
View File

@@ -1,11 +1,12 @@
.form {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Spacing-x1);
padding: var(--Spacing-x3) 0px;
}
.container {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Spacing-x1);
grid-template-columns: 1fr 1fr;
width: min(100%, 600px);
}
@@ -23,3 +24,30 @@
justify-items: flex-start;
margin-top: var(--Spacing-x1);
}
@media screen and (min-width: 1367px) {
.form {
gap: var(--Spacing-x2);
padding: var(--Spacing-x3) 0px;
}
.container {
gap: var(--Spacing-x2);
grid-template-columns: 1fr 1fr;
width: min(100%, 600px);
}
.country,
.email,
.membershipNo,
.phone {
grid-column: 1/-1;
}
.footer {
display: grid;
gap: var(--Spacing-x3);
justify-items: flex-start;
margin-top: var(--Spacing-x1);
}
}