Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Basic card component using a HTML and litle CSS

@SuperSheykh

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

imLumarq 210

@imLumarq

Posted

Hi Sekou SIDIBE

Congratulations on completing your first project

1.You have vertical scrolling due to the default margin on the body.

Your code


body{
background: rgb(206, 230, 248) ;
font-family: 'Inter' ;
}

Modified code


body{
background: rgb(206, 230, 248) ;
font-family: 'Inter' ;
margin: 0 ; 
}

2.Remove the min-heigth: 70vh; on the .card{} as this causes the card to always be 70% tall of the device you are viewing it on. This issue can viewed on the on a Ipad mini with a dimensions of 768x1024

3.Remove the flex-direction: column; on the section{} as this causes you card to overflow on smaller devices. This issue can viewed on the on a Samsung galaxy fold with a dimensions of 280x653

Here's my solution:

https://www.frontendmentor.io/solutions/qr-code-component-CmLwve7xsm

I hope you find this helpful 😄!

Happy Coding!

Marked as helpful

0

@SuperSheykh

Posted

Thanks for the taking the time. @imLumarq

0

Please log in to post a comment

Log in with GitHub
Discord logo

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