CSS Grid and Flexbox product landing page

Community feedback

• 

  the-coding-beekeeper•270

  @the-coding-beekeeperPosted about 1 year 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.

  Marked as helpful

  1

  ---

  

  SonEfAdam•10

  @SonEfAdamPosted about 1 year ago

  @the-coding-beekeeper

  Thank you so much! I took your suggestions and added them to my code.

  I could not change the width to a percentage though because it would stretch the image whenever I changed the width of the window. I think it did that because the size of the parent (body element) was also changing and it would always take the percentage of it. So, I thought it best to keep it as a pixel since it was not changing.

  Other than that, I appreciate your response. I will definitely use em and rem values more than px in the future.

  Have a blessed day!

  0
• 

  P

  Azzumar•340

  @AzzumarithmPosted about 1 year ago

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

  Marked as helpful

  1