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!
@jcnevess
Posted
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.
@vedant027
Posted
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!
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
