Skip to content
Submitted over 1 year ago

Flex, max/min width, font CDN

Josh Rodriguez•30
@drjrodriguez
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I learned about HSL and how it relates to RGB, which was very interesting. I added the box-shadow too. I like little details like that.

I wondered about the font import. I went back to the google font page and used their cdn code. Maybe that was what I was supposed to do anyway, but from the specification, I wasn't sure. And the @font-face rule didn't work because of a CORS error. But with the google font link code, everything was fine.

I built the whole thing using flex and tested it on various sizes. It transitions smoothly at all sizes, so I didn't see a specific reason or way to use the responsive widths indicated. If I was restacking or arranging based on width, that would have been different. I'm not sure what I was supposed to make of that.

Community feedback

  • Rino•340
    @Rhinozer0sPosted over 1 year ago

    Hi coder, 👾

    your solution is great! You have a good eye for the details. I have some recommondation for you.

    Grid & Gap

    Remove the margin of your <p> elemets. It is a popular technic to remove the margin of all elements before you start styling. To create the distances you could use the gap property in combination with display: flex; or display: grid; This could look like this:

    *{
margin: 0;
padding: 0;
}

.modal{
display: flex;
flex-direction: column;
align-content: center;
row-gap: 1rem;
}

    Semantic HTML

    Also you sould use semantic html tags like <main> for your modal or <h1> for your headline. Here you can read more about that: https://www.w3schools.com/html/html5_semantic_elements.asp

    I hope you find this helpful 🤝😉

    2

Please log in to post a comment

Log in with GitHub

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