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

Responsive QR code page

@Adebowale3

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


As I am a beginner, I found adjusting the QR to stay in the middle without moving on a laptop screen, I am also not sure whether my arrangement are well structured.

Community feedback

enochlee 600

@iamenochlee

Posted

@Adebowale3 yes the style tag stays in the head, in your code you put your Google fonts link in the style tag, that's wrong they should be directly in the head. Read more about it here Web3Schools

0
enochlee 600

@iamenochlee

Posted

hey there, your stylesheet is not properly link try <link rel="stylesheet" href="./CSS/qrcode.css"> you missed a .

0

@Adebowale3

Posted

@iamenochlee Thanks very much for offering to help..I have tried it both ways but still didn't work: I tried it your way and the way below:

<link rel="stylesheet" href="qrcode.css">
0
enochlee 600

@iamenochlee

Posted

@Adebowale3 redeploy the site, I went through your code, it's very minified you can add it in a style tag in your html, not the best practice just to get started then you can continue researching on what went wrong.

0

@Adebowale3

Posted

@iamenochlee finally, it works using internal CSS...Thank you very much..I really appreciate it

1

@Adebowale3

Posted

@iamenochlee hi, sorry to bother you again..in my CSS, the background color (black) that I applied on the body didn't work on Github even though it work well on my VS code live server..

0
enochlee 600

@iamenochlee

Posted

@Adebowale3 yes, check your code syntax, i mean the google fonts pre-connect links should not be in the style tag, it should be in the head tag, but the black background will only mess up your code, imo. update this styles to make your site look better

#container{
   width: 100%;
    margin: 0px;
    height: 100vh;
}

Marked as helpful

0

@Adebowale3

Posted

@iamenochlee but I thought style is usually within the head tag ?

0
Macdeesh 610

@macdeesh

Posted

This comment was deleted

0

@Adebowale3

Posted

@macdeesh Thank you very much...I actually linked it that way at first but didn't work..there got to be something I'm doing wrong..

0

@Adebowale3

Posted

@macdeesh : I hope I copied the right one

https://github.com/Adebowale3/QRcode

0

@Adebowale3

Posted

@macdeesh finally, it works using internal CSS...Thank you very much..I really appreciate it

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