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

All comments

  • cisneConCorbata• 170

    @cisneConCorbata

    Submitted

    Does anyone know a more effective way to center vertically than "position: absolute;"? I find that method is better when using only text.

    QR code component solution

    3

    Kukuh Wijanarko• 190

    @kkhwjnrk

    Posted

    Yes, I think there is a more effective way to centre content vertically than using position: absolute; - using Flexbox. You can centre the card element vertically by adding the following CSS to the main element:

    <main>
  <div class="card"></div> // card to be placed in the middle
</main>

    main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    This will centre the card element horizontally and vertically within the main element. Flexbox is a great way to centre content, especially when dealing with dynamic content or elements of different sizes.

    I hope this helps🙏

    Marked as helpful

    0
  • h415232• 110

    @h415232

    Submitted

    I learned a lot from CSS Flexbox from this exercise. I did have difficulty managing the icon/image placing in the button as the button text tends to wrap, making the button text 2 lines instead of 1 line (as what the exercise wants).

    I wanted to ask the community if there is a more efficient way of managing images in buttons as it is very tricky. Any feedback will be helpful for me to learn!

    Thanks! :)

    Product Prev Card Component Solution (Not Responsive)

    1

    Kukuh Wijanarko• 190

    @kkhwjnrk

    Posted

    Wrapping the image inside a container element is unnecessary when adding it to a button. Instead, we can directly add the image inside the button element. Like this:

    <button class="btn">
  <img src="./assets/images/icon-cart.svg" alt="">
  Add to cart
</button>

    We can use flexbox to align the image and the text inside the button. We can apply the flex properties to the button element like this:

    .btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
}

.btn img {
  width: 1rem;
  margin-right: 0.75rem;
}

    I hope this helps🙏

    Marked as helpful

    1
  • Kukuh Wijanarko• 190

    @kkhwjnrk

    Posted

    In the left time, there is a typo

    Marked as helpful

    0
  • Clea Carty• 20

    @CNash23

    Submitted

    My code is as follows for the body:

    body{ background-color: hsl(212, 45%, 89%) ; min-height: 100vh; display: grid; place-content: center;

    It seems to be properly centered with Live Server but it displays differently with the Github link.

    QR Code 3rd Solution

    2

    Kukuh Wijanarko• 190

    @kkhwjnrk

    Posted

    To properly center the content, you can move the properties from the body element to the main element and adjust the min-height: 90vh;. Additionally, you may need to reduce the top margin on the .attribution

    body {
  background-color: hsl(212, 45%, 89%);
}

main {
  min-height: 90vh;
  display: grid;
  place-items: center;
}

    Marked as helpful

    1