Testimonial Page with HTML, CSS, JS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one. Though the layout is kind of small in desktop but on the mobile view, it is fine.

  Some suggestions would be that:

  1. On your body tag, refrain from using height: 100vh since this will only allow the element to have 100% of the remaining viewport's height. Instead use min-height: 100vh on this. This make sure it will have a minimum of 100vh and will expand if it needs. Also remove the overflow: hidden

  1.1. Also on the body tag. You may want to add. This will align properly the testimonial.

    align-items: center;
    display: flex;
    justify-content: center;
  

  2. By doing number 1, you should now remove all of the margin on your testimonial01 id selector, because the body tag will now make it align properly.

  3. You don't need to use br on this, on your textimonial selector, since div is a block element and will be in the next row.

  4. Your slider toggle needs to be inside button and not just img. By using button, you are allowing it to be keyboard interactive or control interactive.

  5. Lastly, maybe just adjusting the width of the testimonial and the elements inside it like in the original.

  But still, good job on this ^

  0

  ---

  

  prakash•250

  @mewebbiePosted over 3 years ago

  @pikamart all your points are noted and appreciated. However, the reason behind height 100vh for body is to place the background left bottom of the page. Thank you :)

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  It looks like you got your solution close but if you look in the screenshot and your page. That wavy or zigzag image is currently occupying space in that image container for the people and not behind the people as the layout image and the screenshot show. It should be a simple fix to adjust

  0