Design comparison
Solution retrospective
I have done most of the job but I'm not sure how to make the left block and right block stitch together as if the left block is on top of the right block to cover the border radius. I tried z-index and position set to absolute for the right block but couldn't make them align perfectly in the middle of the screen and equal size for the two blocks.
In mobile mode, basically the same issue, and not sure why there is a white space at the top of the screen in mobile mode, I made sure to have the margin set to zero.
Much appreciated if anyone can provide some comments. thanks!
Community feedback
- @jcnevessPosted 12 months ago
Good job. You can try creating a container and put left and right containers inside it and set the background color in the parent cointainer. Then use media queries to handle positioning and the border radius.
CSS Flexbox can help you with the positioning.
0 - @vedant027Posted 12 months ago
Hey, you can try increasing the width of right block more than the left block then use position: relative; and adjust it according to your need....you can have a look at my code once.
and for the mobile mode you can use display: flex; , flex-direction: column; and set height to 100vh this will do it for you.
Hope this helps!
0
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