Design comparison
Solution retrospective
The dimension of the background image doesn't changes with the tablet dimension (768px) this doesn't cover the div
Community feedback
- @besttlookkPosted over 2 years ago
hi It look great but unfortunately its not responsive.
Good luck
0@Marvin-ErazoPosted over 2 years ago@besttlookk yes it is, i think the page doesn't works with your device resolution, i only made media queries for 3 different dimensions. Desktop (1024px) Tablet(768px) and Mobile L devices (425px), your device resolution is about 425 and 768px, sorry for this
0@grace-snowPosted over 2 years ago@Marvin-Erazo sorry to tell you that's not a good enough response. We build for all screen sizes. If it doesn't work, it's not finished.
This is broken for me on mobile landscape - possibly the same issue. I'll add screenshots to slack for you so you can see
It's actually a bit broken on both mobile orientations for me because of height 100vh instead of min-height and because of the fixed position attribution. Both of these need changing.
Other essential fixes needed
- asides are not the correct elements to be using for the two card halves. Asides have semantic meaning - this is incorrect usage
- you are heavily nesting your css selectors. When using scss your compiled css should be exactly the same as if you wrote the css directly - you would never write css like this because it increases specificity massively. You need to remove all the nesting, using single class selectors or as Low specificity as possible. This is a really important habit to break now before moving on to larger projects
I also recommend you change your html formatting to 2 space tab stops. It is really hard to read the code at the moment as every line is so spread out. Most developers use 2 spaces, or sometimes 4 but that is less common
I hope this helps. Please refractor before moving on to any other challenges
Marked as helpful1@Marvin-ErazoPosted over 2 years ago@grace-snow thanks for the feedback, i review my code and you're right. The CSS code is impossible to read, are many selectors and it doesn't look good. About the 4 spaces tabs, I use this because in many IDE's the tab is 4 spaces, but i will change this now.
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