fix: responsivity of fields and order of signup form

This commit is contained in:
Christel Westerberg
2024-11-18 15:07:23 +01:00
parent 9094b08345
commit d5c6b6809c
17 changed files with 264 additions and 262 deletions

View File

@@ -1,34 +1,30 @@
.form {
display: grid;
gap: var(--Spacing-x1);
padding: var(--Spacing-x3) 0px;
gap: var(--Spacing-x3);
margin-bottom: var(--Spacing-x3);
}
.container {
display: grid;
gap: var(--Spacing-x1);
grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x2);
width: min(100%, 600px);
}
.header,
.country,
.email,
.membershipNo,
.signup,
.phone {
grid-column: 1/-1;
}
.footer {
display: grid;
gap: var(--Spacing-x3);
justify-items: flex-start;
margin-top: var(--Spacing-x1);
}
@media screen and (min-width: 1367px) {
@media screen and (min-width: 768px) {
.form {
gap: var(--Spacing-x2);
padding: var(--Spacing-x3) 0px;
gap: var(--Spacing-x3);
}
.container {
@@ -36,18 +32,4 @@
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);
}
}