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 component

@moritzrose

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


1.) If you could tell me, how to make the Font-Family Outfit bold, please tell me. I had to use Open Sans, cause Outfit doesn't work with font-weight: bold/900; 2.) Is there a unit, to make the size of containers etc. suitable for smaller/bigger devices - to make it responsible? I feel like I got lucky, that my container perfectly fits the mobile-version width and height, but I want to be in control of that.

Community feedback

@moritzrose

Posted

Thank you so much! That helped a ton!

0

@Jahan-Shah

Posted

Hi Moritz 👋, weldone on solving your challenge. I'm here to answer you questions.

  • You need to import all the font weight you want to use in your style. So how you select the font weights is that you go to the font on google fonts and scroll down to styles of font, you'll see all the weights of that font, now click select on right side of all the weights you need and then copy the import link. i.e if you want to use bold outfit font the import should look like this:
  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=swap');
  • Units will not make your design responsive, but try to use relative units like rem, em etc instead of absolute units like px

  • To make your design responsive you flexbox or grid and media queries.

Lastly here is an absolute amazing tutorial on responsive by Ramzi - Slaying The Dragon make sure to check this out and learn responsive design easily.

I hope this will help.

Shahjahan

0

@elemenceOR

Posted

Hey Moritz, did you include the weigh 900 when you selected fonts from google font? the import should look something like this,

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&family=Outfit:wght@400;700;900&display=swap" rel="stylesheet">
0

@Jahan-Shah

Posted

@elemenceOR He importing the font in his css file without weights

0

@elemenceOR

Posted

@Jahan-Shah Thank you. I just notices

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