I wonder what to do about the positioning of the footer, since I used position:absolute for the main card component it removed it from the document workflow, so I also used position: absolute on the footer. It creates an issue that if the page is viewed on mobile in landscape mode, the footer is in the middle of the screen. Any ideas how to fix it?
You may try something like this instead of absolute positioning
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
main {
position: static; /* removes position absolute*/
transform: none; /* removes transform*/
}
footer {
position: static; /* removes position absolute*/
margin: 0 !important; /* or remove class centered */
justify-self: end;
}
P.S. main will be centered in the free space above footer, so you will need some additional styling, for example margin to center it relative to screen height
And as for me, it would be better to start showing desktop view from min-width a little bit bigger then component width, not from exactly 1440px
Looking for feedback on best practices and other ways to improve the solution. Thank you!
Can someone explain me what to do with layout device info, please?
In this challenge design is essentially the same for screens width 375px and 1440 px In later challenges layout could be quite different for different width screens. and ussualy this is adressed with css media queries and mobile-first approach Also this desing has a light shadow, you can add it with css box-shadow
