Skip to content
OverviewSolutions
11
Comments
4
Kukuh Wijanarko
@kkhwjnrk

All comments

  • cisneConCorbata•170
    @cisneConCorbataSubmitted over 1 year ago

    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
    @kkhwjnrkPosted over 1 year ago

    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
    @h415232Submitted over 1 year ago

    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
    @kkhwjnrkPosted over 1 year ago

    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
    @kkhwjnrkPosted over 1 year ago

    In the left time, there is a typo

    Marked as helpful
    0
  • Clea Carty•20
    @CNash23Submitted over 1 year ago

    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
    @kkhwjnrkPosted over 1 year ago

    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