Design comparison
Solution retrospective
Hello all this is my first challenge, So please see the given solution and provide me with the feedback. I'm having trouble with the mobile view of the given design, as it's not working properly. Although the code is working fine in desktop view but the responsive design is not so good.
So, please help me out with this and do give me feedback. Thank You Happy Coding
Community feedback
- @grace-snowPosted over 3 years ago
Hi
Yes I'm afraid I would try again with this one. Maybe come back to it later after doing some of the other layout/ui challenges first.
I think the biggest problems are all related to the absolute positioning and pixel values you're using.
height: 100vh will also cause problems. Try min-height instead.
And I think it would really help you I'f you started mobile-first. Get everything looking right in the simplest way possible on the smallest screen, then only override what you need to as the screen increases inside min-width media queries.
That's general best practice anyway, but looking at this in particular I think it would be a very beneficial approach for all of your challenges. You will learn better that way and have simpler css
Good luck
0 - @pikapikamartPosted over 3 years ago
Great work on your first challenge. Upon looking at different points, yes, the the design is off. I saw your stylings and well it's a lot to refactor and give points. But maybe this one helps, avoid using absolute value especially when it is a main component. Since what is that, your left and right container, they are both positioned absolute, they overlaps each other. So maybe refactoring it and not using absolute at the main, but you can make use of
position: relative
then maybe you just add the absolute inside of it, but make sure that your container have the proper size. If you need help, feel free to drop it here and i'll be back to you okay^^0@Rishabh-PagariaPosted over 3 years ago@pikamart Thank You So much, I'll surely check to it and get back to you .
Thank You
0@pikapikamartPosted over 3 years ago@Rishabh-Pagaria Goodluck working on it^^
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