Design comparison
Solution retrospective
I confess that despite this project being relatively basic, I had some difficulties.
In the beginning, setting up the interface was quite easy. The problem started when I went to design the desktop. It was working on desktop but not on mobile and vice versa. After a lot of thinking I managed to solve it by replacing max-width with min-whidth in @media queries.
I'm sure my code got unnecessarily long and complex, with lots of repeated lines. Also, I couldn't properly style the button on the desktop layout. Probably because I used a wrong positioning.
Although I managed to make the project visibly similar to the design, I'm pretty disappointed in myself, I thought I could do better than that.
Community feedback
- @PeeroDembaPosted almost 2 years ago
Hey Bro...Try positioning the body tag relative to the container
In other words,
body{ position - relative;} .container {position absolute;}
Put the entire image into the container and try restyling it....Cheers
And you do not need max and min widths to solve it.
Do this instead,
body{ position - relative; width: 100vw; height: 100vh} Then give the container an appropriate height and width also to make it look like the design
Use media queries on the width and height in the container to align it on various devices
Marked as helpful1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord