Kingsley Agu• 285
@didyouseekyng
Posted
you actually have to tweak the position property for the popup-box, here is a link to the screen shot [Link] (https://ibb.co/gt1BbvJ)
0
Design comparison
Solution retrospective
Hi, all! This is my second pixel-perfect solution to the Frontend Mentor challenge. I have used CSS-grid. In this challenge, I learned so many things about CSS grid which are very useful and important property values such as min-content, max-content, min-max function, and auto-fit.
Well, I had a struggle styling with the dialog template and didn't do well with it. So left it simple. Any suggestions on how we can style that box and how to approach it?
Community feedback
Kingsley Agu• 285
@didyouseekyng
Posted
Hi, Akshay
Great job done for the desktop size, but the layout is quite off on the mobile, as the popup-box is positioned to the right which is a great fit, but not on mobile, I suggest putting this particular class code inside a media query for desktop. other than that, you've done very well.
.popup-box { padding: 0.8rem 2.3rem; background-color: #fff; position: absolute; top: 0; right: 3.5rem; z-index: 1; border-radius: 1rem; border-bottom-right-radius: 0; }
0
Akshay Meshram• 390
@akshay63
Posted
@didyouseekyng Thank you for your feedback! I've checked out both desktop and mobile layout and both seem working fine. As you were suggesting to put the above-mentioned code in the desktop media query for the mobile layout is I didn't quite well understand. As I've built the component using the Desktop-first approach I have CSS declarations for the pop-up box and only need to position it on the mobile version which I did in the Mobile version. Please give me some clarity if I'm wrong!😊 Also if you know how to style the popup box as given in the challenge please let me know! Thanks.😎👍
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