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 page using css and html.

@ssantos-lucas

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


Hello, everyone.

I have one doubt, i hope someone can help me with that.

If you look at the text in my solution and the original challenge text, I couldn't do the text formatting. I couldn't find anywhere about this. Any tips?

Community feedback

@jamesweiss213

Posted

I'm not a big fan of using <h1> tags since they have a lot of default stuff that always makes it hard to work around for me, so I use <p> tags and just give those a class which you did too! The problem I see immediately is that you didn't text-align:center the bottom paragraph so it's aligned to the left.

Second, you'll notice the font-size for the header is actually not THAT much different than the smaller text, so what I would do is make sure they're close to even. I think you made the font-size for the header decent, but the font-size for the body is way too small.

Third, the color for the header is wrong. You're using black when it's a shade of navy blue. Use color:hsl(218, 44%, 22%); for the header.

Fourth, the padding between the top and bottom of your text is wrong. The padding between the header and paragraph text is too much, and the padding between the paragraph text and the edge of the container at the bottom. Also, I think the padding between the texts and the left and right edges are too much too, but it's barely noticeable and it's bound to happen when you're eyeballing like this.

Otherwise, you did a great job with making sure the border radius of the image lines up with the container, itself, which I had trouble doing. Good job!

Marked as helpful

1

@ssantos-lucas

Posted

@jamesweiss213 Thank for your words!

0
rui-rmv 20

@rui-rmv

Posted

Hello, so you've added some additional padding to both the title and the description which is not present in the original. The originals are also placed in the center. Finally you should play with the font sizes to make the line breaks be exactly the same as in the original.

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