Skip to content
OverviewSolutions
11
Comments
4

Kukuh Wijanarko

@kkhwjnrkIndonesia190 points

A beginner Frontend Developer is eager to learn and improve Javascript skills. Passionate about creating clean and responsive designs, always striving to expand knowledge and become a skilled Frontend Developer.👨‍💻

Latest solutions

View more solutions

Latest comments

  • Kukuh Wijanarko•190
    @kkhwjnrkPosted about 2 years 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
  • Kukuh Wijanarko•190
    @kkhwjnrkPosted about 2 years 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 about 2 years ago

    In the left time, there is a typo

    Marked as helpful
    0
  • Kukuh Wijanarko•190
    @kkhwjnrkPosted about 2 years 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