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

Qr Code Card

Enis Kerti 590

@eniskrt

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

P

@Islandstone89

Posted

Hi, well done, just a few suggestions.

  • The alt text should also tell where it leads.

  • I would get in the habit of doing a good CSS Reset at the beginning

  • height on body should be min-height.

  • Never set fixed widths, except for sometimes on icons. The content should determine the width and height.

  • width on img should be max-width.

  • You don't need to write main in front of the selectors :)

Marked as helpful

1

Enis Kerti 590

@eniskrt

Posted

@Islandstone89

Thanks your suggestions. Sice then I use some of you said. Nowadays I try to use % or ,as you said, min/max for my layouts. But I generally hesitate to use in my layout % or min/max. In your opinion, which one should I use?

0
P

@Islandstone89

Posted

@eniskrt You rarely need mins, and max only occasionally.

1

@FridaWaldt

Posted

Hi Enis! Well done on completing this challenge 🙌

I have a suggestion to make it easier for you to center your card on the page, let me know if you try it out. 😊

In your CSS file, I suggest you add the following code to your body tag: height: 100vh

That way you can remove the margin-top: 10rem from your main.card tag.

Hope it helps, and good job! ✔️

Marked as helpful

1

Enis Kerti 590

@eniskrt

Posted

@FridaWaldt Tanks for your suggestion. Immediately i apply your suggests. i'm on way.😊

1
Enis Kerti 590

@eniskrt

Posted

it works😊 @FridaWaldt

0

@FridaWaldt

Posted

@eniskrt Happy to hear this Enis! Good job! 😊

0
Enis Kerti 590

@eniskrt

Posted

Its funny to do this. As far as I do I try to use semantic html tags. I add all card in a main tag. Its accessible to eveyone. I didn't improve my responsive display. But i think generall looks good in every size.

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