Submitted about 2 years ago

Created the QR code project as a Typescript React project

Jeff• 210

@W4GFO

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I tried to create this one without any media queries. Also, wasn't sure if using 'aspect-ratio' is the best way to keep the card looking nice on both large and small screens.

Community feedback

Luis David Guaiquirian• 300

@luisgcode

Posted about 2 years ago

Hello my friend!, The HTML issue you have on your report is because you are using an Article and then a <p> to insert the title "Improve your front-end skills by building projects", generally when you use <article> you put a heading after the article to present the article so, change that paragraph for a heading and you will fix that one.

Marked as helpful

Jeff• 210

@W4GFO

Posted about 2 years ago

@Widoguaiquirian Thank you Luis, I learned something new. I'll be sure to remember to put in the heading tag going forward. Thank you for taking the time to look at my project.

Hyron• 5,870

@hyrongennike

Posted about 2 years ago

Hi @W4GFO,

Nice job on the challenge, it looks goof.

The aspect ratio isn't needed, you can remove it and simple adjust the styling of the article element to the following.

.primaryframe article {
    font-family: Outfit,Times New Roman,Times,serif;
    text-align: center;
    padding: 0 1.5rem 1rem;
}

the above will get you something close to the design. Hope this if helpful.

Marked as helpful

Jeff• 210

@W4GFO

Posted about 2 years ago

@hyrongennike Hello Hyron, thank you for this. I really appreciate you taking the time

Please log in to post a comment

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