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

Made a card centering on the page

hajime hayamizuโ€ข 10

@bobo62234

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


I kind of forced the image in position with padding but I'm kind of unsure if thats the correct way to do it. If there is a better way to center-align, Iwould like to know because at one point the card was half way leaving the screen.

Community feedback

P
Darrick Fauvelโ€ข 340

@DarrickFauvel

Posted

Hi @bobo62234, ๐Ÿ‘‹

Congratulations on your first solution! ๐Ÿฅณ

It looks like your font face is not working properly. Try this in your stylesheet:

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

...and...

body {
  font-family: 'Outfit', sans-serif;
}

I hope this is helpful. ๐Ÿ˜Š

Marked as helpful

2

@DiegoTorresUSA

Posted

Iยดm noob in this theme, but I noticed that the background is a little different of the challenge.

Another thing is that the font-family is different , if you check the resources they gave you, there are the colors, the fonts, and the necessary that you must use in the challenge.

Keep learning!!!

Marked as helpful

1

hajime hayamizuโ€ข 10

@bobo62234

Posted

@DiegoTorresUSA Yeah I'm stupid I didn't realise that lol. Thanks for the heads up! :)

0
Akhlak Hossain Jimโ€ข 1,325

@Akhlak-Hossain-Jim

Posted

Great work so far.

  • instead of <div class="card"> use <main class="card">
  • it's not responsive now try doing that, and code not accessible.

try those fixes and mark the comment helpful if it is.

Thanks, Happy coding :)

Marked as helpful

1

hajime hayamizuโ€ข 10

@bobo62234

Posted

@Akhlak-Hossain-Jim Thanks for the feedback! :) Sorry if this is a stupid question, but why the main tag over div in this situation? Also, I'm guessing the code not being accessible is me needing to fix something on github?

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