Skip to content
Submitted 27 days ago

QR Code using html and css only

Sab•20
@Sabicana
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

What are you most proud of, and what would you do differently next time?

i really proud because this is my first project at frontend mentor.

What challenges did you encounter, and how did you overcome them?

maybe about adding some padding to h1 , i still dont know much about layout

What specific areas of your project would you like help with?

how to make a space between left and right element H1? because if i add margin/padding left and right , it makes h1 becomes 3 lines. i still want it to be just 2 lines. is this something with the width of container ? or with the flex ? thanks

Community feedback

  • KapteynUniverse•2,170
    @KapteynUniversePosted 27 days ago

    It is because you set the .container width to 400px, margin and padding doing what you want but since the container can't get bigger than 400px anymore, h1 text is wrapping instead.

    What you want to acquire is probably can be done with reducing the h1s text size and leaving the padding. Try this one:

    h1 {
    padding: 0px 2rem;
    font-size: 1.625rem; /* or 1.75rem */
.
.
.
}
    Marked as helpful
    1
    Sab•20
    @SabicanaPosted 26 days ago

    oh font size! didnt think about it. thank u so much @KapteynUniverse

    0

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