Responsive Coming Soon page using HTML, CSS and JS

Community feedback

• 

  Rabin Gharti Magar•455

  @Rabin92

  Posted over 4 years ago

  Hey, Hoophelie! 👋

  You have done a great job on this challenge! 🙌

  The site is fully responsive and looks great on all screen devices. Nicely formatted code with semantic tags in use.

  There's just a minor issue with an overlay as it does not fully expand to viewport size on a small screen landscape mode. To fix this issue, you can follow these steps:

  Add this code to the body tag:

  body {
  position: relative;
  }
  
  

  Remove width & height property from .overlay class and add the following code instead:

  .overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  }
  

  And lastly remove height property from a small screen devices with the class name of .landscape-page and add it to the media queries for a medium-large screens.

  To fix the accessibility issues, you can simply add a label tag. Learn more about these tag here: https://www.w3schools.com/tags/tag_label.asp

  Hope this helps and Happy Coding! 😊

  31
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Hey there, Hoophelie! 👋

  Nice to see you complete another challenge! 😀 Nice job on this one! 👏

  One more tiny thing I might suggest in addition to Rabin92's helpful feedback is to perhaps add overflow-x: hidden to the body to prevent a horizontal scroll bar from appearing along the bottom of the screen in the mobile layout (or set the width of the image in the mobile layout to 100%, since the image is the element that's overflowing the body and causing this issue, and adding that seems to solve it). 😉

  Keep coding (and happy coding, too)! 😁

  11