Skip to content
OverviewSolutions
1
Comments
1
Johnny Deev
@dev-jvcosta

All comments

  • Charles•90
    @Ghost-Writer-2Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    While solving the QR code challenge I had problems centering the qr code image. After a little online search, I learned that images act funny in a div because we're forcing an inline element (img) inside a block element (div). I learned two ways to tackle this problem but I used the one I preferred 👇👇👇👇👇

    👇 To see how you can add code snippets, see below 👇:

      .qr-code {
    margin-top: 10px;
    width: 95%;
    height: 100%;
  }

  #qr-code {
    padding: 5px;
    display: block;
    margin: auto;
    box-sizing: border-box;
    width: 100%;
    border-radius: 15px;
    object-fit: contain;
  }
    What specific areas of your project would you like help with?

    Responsive Layouts

    CSS Flexbox, HTML5

    1
    Johnny Deev•30
    @dev-jvcostaPosted 4 months ago

    To further enhance your project, specifically the QR code container section, you can wrap the image element in a div and apply display: flex with flex-direction: column. This will make it easier to adjust the element for responsiveness in a simpler way. Additionally, define a max-width: 375px for the maximum size of the element.

    Marked as helpful
    1