responsive product page using html and css

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Hicham Maachou, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

  I did some fixes to your code:

  The correct size for the container is max-width: 900px(to have the correct size and also make it responsive)

  .product-container {
      background-color: hsl(0, 0%, 100%);
      border-radius: 10px;
      /* height: 70%; */
      max-width: 900px;
      /* width: 60%; */
      overflow: hidden;
      display: flex;
      justify-content: space-between;
  }
  

  Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Hicham Maachou•40

  @hichammaachouPosted about 2 years ago

  @correlucas thank you sm that was really helpful!

  1
• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hello @hichammaachou, how are you?

  Welcome to the front-end mentor community. I really liked the result of your project, you did a great job in this challenge, but I have some tips that I think you will like:

  1- Document should have one main landmark, you could have put everything inside the main tag click here

  I noticed that the container was growing due to the relative measurement units, always try to use fixed measurement units at higher resolutions, and you can make the change using an emdia query for the relative measurement unit, which is better at lower resolutions.

  .product-container { height: 500px; width: 700px; }

  The rest is great! Hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Hicham Maachou•40

  @hichammaachouPosted about 2 years ago

  @AdrianoEscarabote thank you so much for feedback, very helpful!

  0

  

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  @hichammaachou no problem man, keep coding 👍

  0