Skip to content
OverviewSolutions
11
Comments
3
Ivan Olmo
@ivanolmo

All comments

  • Ivan Olmo•310
    @ivanolmo

    Hi Shariful. It looks like you have 2 branches, "main" and "master". Your "main" branch is your default branch but has no code. Your "master" branch does have code. In your "main" branch, you can merge the code that is in your "master" branch, then your solution should be complete.

    Marked as helpful
  • Ivan Olmo•310
    @ivanolmo

    You can center your main card very easily using flexbox. For example, you have text-align on your body, but that should only be used to align text, not elements/containers. You don't necessarily need the margin-top on your .container either. Instead you can do:

    body {
  display: flex;
  justify-content: center; /* this will center the card horizontally */
  align-items: center; /* this will center the card vertically */
}

    You can do similar code with your .container to center your img and main div, and also with your .text-box to center your h2 and p, like this:

    .container,
.text-box {
  display: flex;
  flex-direction: column;
  align-items: center; /* this will align your flex items (img and div) horizontally inside your card */
}

    The vertical spacing between elements on your card can be accomplished with flex gap or with margins. For example, your .text-box has a margin-top of 30px, and that works to space it from your img, but the same can be accomplished by setting gap: 30px if your .text-box was a flex container.

    You'd only want to use text-align to center align your actual text within it's containing element, such as the text inside your h2 and p.

    Here is how I'd change your CSS, with comments:

    * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: hsl(212, 45%, 89%);
        /* text-align: center; <--- remove this */
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh; /* add this so body will take up the entire viewport */
      }

      .container {
        /* display: inline-block;  <--- remove this */
        display: flex;
        flex-direction: column; /* the card flows vertically, so use column */
        align-items: center; /* will center img and .text-box horizontally */
        background-color: #fff;
        padding: 20px;
        font-family: 'Outfit', sans-serif;
        padding-bottom: 40px;
        /* text-align: center;  <--- remove this, instead apply it to elements that have text inside */
        border-radius: 4%;
        box-shadow: 3px 3px 20px 2px rgba(0, 0, 0, 0.1);
        /* margin-top: 50px;  <--- remove this, flex will position the card */
      }

      .container img {
        border-radius: 4%;
        width: 325px;
      }

      .text-box {
        margin-top: 30px; /* <--- doesn't necessarily have to be removed, but you can use flex gap on the parent container instead */
        /* text-align: center;  <--- remove this, instead apply it to elements that have text inside */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; /* instead of giving your h2 padding-bottom, give the flex container 20px gap instead to accomplish the same thing */
      }

      /* h2 and p are now centered by flex box */
      .text-box h2 {
        /* padding-bottom: 20px;  <--- remove this, replaced with gap above */
        text-align: none; /* now add this to center the text within it's own container */
      }

      .text-box p {
        color: hsl(220, 15%, 55%);
        font-size: 15px;
        text-align: center; /* now add this to center the text within it's own container */
      }
    Marked as helpful
  • Ivan Olmo•310
    @ivanolmo

    Awesome, thanks for the feedback! Already worked all of it into the next challenge :)