@besttlookk
Posted
hi It look great but unfortunately its not responsive.
Good luck
@Marvin-Erazo
Posted
@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
@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 helpful
@Marvin-Erazo
Posted
@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.