I have added all my CSS code at the end with comments.
I have to comment @media because it has fix sizes to avoid those fix sizes to interfere with general layout for body and main. Probably some fix sizes still interfering...not sure.
Cards container has a minimum height to be accurate with mobile layout as well.
I hope it is understandable. This all of it
body {
min-height: 100vh;
display: grid;
/* Create 2 rows,
auto makes the footer stick at the end and
main occupies the remaining space */
grid-template-rows: 1fr auto;
/* Create 3 columns, the middle one with our web app,
min width of 375 px and max width of 1440px */
grid-template-columns: 1fr minmax(375px, 1440px) 1fr;
/* The same as
align-content: space-between; and
justify-content: center; */
place-content: space-between center;
}
body>main {
grid-row: 1 / 2;
grid-column: 2 /3;
}
body>footer {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
main {
display: flex;
flex-flow: row wrap;
}
main section#gradient-bg {
min-height: 240px;
/* Section containing cards grows till max-width of 33.33% = 1/3*100*/
flex-grow: 1;
}
main section#form-bg {
/* Section containing form grows till max-width of 66.66% = 2/3*100*/
flex-grow: 2;
}
I have added all my CSS code at the end with comments.
I have to comment @media because it has fix sizes to avoid those fix sizes to interfere with general layout for body and main. Probably some fix sizes still interfering...not sure.
Cards container has a minimum height to be accurate with mobile layout as well.
I hope it is understandable. This all of it