FrontEnd Mentor Card design

Community feedback

• 

  Ahmed Hany•220

  @ahmedhanyh

  Posted over 2 years ago

  Hey! Congrats on completing your project.

  This is an answer to your specific question on aligning the icon with the "Add to cart text"

  One way to achieve this is by using flexbox to align a group of items in a single row or column. Try adding these styles to the element that contains the icon and the text, in this case the div.button_text (which isn't necessary by the way, it's better to remove it, to reduce your HTML markup, and apply the styles below on the <button> instead):

  div.button_text /* or button, or whatever contains the icon and text */ {
      display: flex;
      align-items: center;
      gap: 12px;  /* this only adds a gap between the icon and the text and not necessary for alignment */
  }
  

  Hope I've helped! Wish you the best on your journey.

  01

  Marked as helpful
• 

  Taner•190

  @tanereren

  Posted over 2 years ago

  Hey! The project looks great, well done

  If you remove the display: block from img tag the elements will line up again and if you also remove the margin-left: 80px they'll be centered

  img{
      max-width: 100%;
      display: block; <-- REMOVE THIS!
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
  }
  .cart_icon {
      margin-left: 80px; <-- REMOVE THIS!
      padding-top: 0px;
  }
  

  The default value is display: inline, display: block will make it so that the element starts on a new line and take up the whole width - not what we want here

  Add padding to the button after too!

  Happy coding! :)

  01

  Marked as helpful
• 

  Nenad Cosovic•360

  @nenadmne

  Posted over 2 years ago

  Hello, i look into code

  <button>
    <div class="button_text"><img class="cart_icon" src="./images/icon-cart.svg" alt="cart">  <span>Add to Cart</span> </div>             
  </button>
  

  From this html part, remove div that is inside button, and put button class class="button_text" instead. Div in not supposed to be inside button.

  After that go in css and type .button_text { text-align:center}. This will center img and text in button.

  To make space between them just margin it in css.

  Keep up =)

  01