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

centering qr code component using css

da vinci 100

@daxvinci

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


while building the project i couldnt get the h2 and paragraph text to align, what should i have done differently?

Community feedback

@PabloBezerra

Posted

Como vai cara? Tudo em cima? Respondendo a sua pergunta, primeiro que não existe um h2 no seu código existe apenas 2 parágrafos de tag <p>, segundo que para alinhar ao centro da tela (que eu suponho que foi nesse sentido a sua pergunta) você poderia ter utilizado o "text-align: center;" isso fará com que fique centralizado. Mas reparei que vc publicou o readme e não o site em si, pra resolver isso você deve remover o documento "index.html" da pasta e deixa-lo fora de qualquer outra pasta, ai o github pages vai identificar o site e vai publica-lo corretamente. Espero ter ajudado! Abraços!

1

da vinci 100

@daxvinci

Posted

@PabloBezerra thank you very much :) i have made the following corrections and i hope you can see it.....if you can let me know. i appreciate your feedback.

0

@PabloBezerra

Posted

@daxvinciExcellent! Perfect!

Some suggestions:

  • Instead of using a <div> tag with the role=main attribute, the best option in this situation is to use a <main> tag, which is more semantic for HTML.
  • With so many lines of CSS code in the head of the HTML document, the most ideal thing is to create a CSS document, pass these lines there and in the head of the HTML insert the <link rel="stylesheet" href="your document.css">
  • In your CSS you use .text :first-child{} and .text :last-child to refer to a <h1> and a <p> within a <div> . It's not wrong, but the ideal is to be more specific, you can use the following declaration: .text h1{} and .text p{}. This will allow you to better refer to these elements. Use .text :first-child{} and .text :last-child when there is an element with several equal children, which is impossible to reference one without interfering with the other.
  • Finally, the color of your <p> is not very clear, making it difficult to see.

These were the points that I thought were important to comment on, I hope I helped!

obs. Sorry for the comment in Portuguese, I hadn't noticed that the page translated automatically, I thought the project was by a Brazilian.

1
da vinci 100

@daxvinci

Posted

@PabloBezerra hey thank you very much for the advise

  • i will adhere to the <main> tag from now on
  • As for the css....external is my go to...i just thought that ill switch it up for this space but yes as the css gets bigger i will have to switch back to external :)
  • And for the .first-child and last-child youre absolutely right
  • I will change the <p> color now .

Thank you for the corrections and its okay about the portuguese....i wish i could speak it tho XD

1

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