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

html ,css desktop view

@lexifoster-code

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


if you have any comments feel free

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hello, Alexis Foster! 👋

The link for the GitHub repository is a link to the GitHub repository for another challenge. So, I recommend updating the URL.

One suggestion I have is to remove all br elements. Avoid using br elements for presentational purposes. Read what MDN documentation says about it. Also, screen readers will read out br elements as "break". So, let lines wrap where they need to.

I hope you find this useful!

Marked as helpful

1
Damian 150

@damiandev22

Posted

good job. there is something in your solution I was trying to understand and got me thinking. That is the positioning of the image because there is a bit of space larger in the right side. In order to center it better you could change two things. In the "qr-card" you could add a padding of 10 px instead of the margin of 10px in the img. .qr-card{ padding: 10px; }

in the "qr-code" change the fixed width of 275px for a 100% width and erase the margin there. .qr-code { /max-width: 275px;/ width: 100%; border-radius: 7px; /margin: 10px;/ }

those changes will center the image better. good look coding

1
Adriano 34,090

@AdrianoEscarabote

Posted

Hi Alexis Foster, how are you?

I really liked the result of your project, but I have some tips that I think you will like:

1- All page content should be contained by landmarks, you can understand better by clicking here: click here

2- Document should have one main landmark, you could have put all the content inside the main tag click here

3- Page should contain a level-one heading, you could have changed h2 to h1 click here

I noticed that the content is not centered to fix this we can do the following:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min height: 100vh;
}

Always prefer to center something using flex-box or grid, margin always in the last case!

If you have any questions, answer this comment and I'll explain better!!

The rest is great!!

Hope it helps...👍

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