Responsive landing page using CSS flex property

Community feedback

• 

  vladyslav-shulhach•170

  @vladyslav-shulhachPosted 3 months ago

  Great job on the project! I have a couple of suggestions that might help improve your code and make it even more efficient.

  First, I noticed some unnecessary lines in your html and universal selectors. For example, you're using -webkit-box-sizing and -moz-box-sizing, which are pretty much obsolete these days because most modern browsers support the standard box-sizing property. Simplifying this would make your code neater. Also, you're setting box-sizing in both the html selector and the universal selector, which is unnecessary. You can just keep it in the universal selector for a cleaner, more maintainable approach. I've put together a revised version for you:

  *, *::before, *::after {
      box-sizing: border-box; /* Universal box-sizing */
      margin: 0; /* Reset margins globally */
      padding: 0; /* Reset padding globally */
  }
  

  This setup means you don't need to set line-height: 0; to fix spacing issues between images and text. It's simple and gets the same result.

  Secondly, I noticed a proportional layout issue on tablets. When resizing the screen, the image and product description lose alignment because the max-width of the image and .product container are both set to 100vw. This creates an imbalance where the image width stays the same, but the content can expand beyond it.

  To fix this, you could set the width of both the image and content (.product_description) sections to 100% within the .product class. Avoiding max-width in this case ensures consistency and better responsiveness. Here's an example of how you could refine the layout:

  .product {
      width: 21.5rem; /* Fixed width (or adapt as necessary) */
  
      &_descriptions {
          padding: 26px; /* Ensures consistent spacing */
          width: 100%; /* Not necessary, but ensures that it reaches the container */
      }
  
      &_image {
          width: 100%; /* Scales the image with the container */
          &__img {
              width: 100%; /* Maintains proportions */
          }
      }
  }
  

  You're doing a great job, and with just a few minor changes, your design will be even more polished. Keep up the great work and happy coding!

  0