Design comparison
Solution retrospective
Hello everyone, I am doing these challenges with css grid, flexbox and BEM, any feedback is appreciated. :D
Community feedback
- @statanasovaPosted almost 4 years ago
Hey Jesús, I think your BEM is just fine, the layout is responsive, so good work!
It is very interesting how you use the body to define the Grid, I didn't even know that was possible :)
For the mobile version, you can remove the SVG background and use a gradient.
And for the desktop version, use
background-size: cover
to make the SVG cover the whole width and height of the screen, because I see some large white spaces on high resolutions. Another way to do the background - in my solution, I added an extradiv
with the SVG as a background and put it behind the left column only (div
s and other containers can overlap in the same Grid rows/columns). I think that's how it is in the original design.One more thing... Please, fix the submit button that hangs below the input field :D Just add
top: 0
. And maybe give the input field a transparent background.Keep it up! PS. Upvote if any of this was helpful :)
1@JesusAtao96Posted almost 4 years agoHello statanasova
I was thinking of redoing this project and making it much better, thanks for the feedback :D
0
Please log in to post a comment
Log in with GitHubJoin 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