CSS Grid and Flexbox product landing page

Community feedback

• 

  the-coding-beekeeper•270

  @the-coding-beekeeper

  Posted almost 2 years ago

  Hi SonEfAdam!

  Congratulations for finishing this project! As you are new to HTML and CSS there are revealing some issues. Let me offer you some suggestions to improve the code:

  Give your body a width:

  body {
      width: 100vw;
  

  Size your grid-container correctly (overflow: hidden should be needless):

  .block {
  width: 42%;
  grid-template-columns: 50% 50%;
  /* overflow:hidden; */
  

  Give your image a width instead of a height and set it`s display to block, so that it fits into the grid-container:

  .dp-img {
  /* height: 600px; */
  width: 100%;
  display: block;
  }
  

  Then reduce the font-sizes and delete all the hard-coded px-margins. Replace the margins where needed with relative values like rem or em.

  in your html the button could be coded easier like following:

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

  The .price element could be solved easier as following:

  .price {
      display: flex;
      align-items: center;
      /* height: 100px; */
  }
  
  

  These suggestions will not lead to a perfect solution, it is only intended to give you some food for thought.

  Happy coding and greetings from the-coding-beekeeper.

  11

  Marked as helpful
• 

  P

  Azzumar•340

  @Azzumarithm

  Posted almost 2 years ago

  apply display : block onto the product image element to solve the 2nd problem.

  10

  Marked as helpful