fix: responsivity of fields and order of signup form
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user