Responsive Coming Soon page using HTML, CSS and JS

Community feedback

• 

  Rabin Gharti Magar•455

  @Rabin92Posted almost 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! 😊

  3

  ---

  

  Hoophelie•110

  @HOOPheliePosted over 3 years ago

  Hi @Rabin92 !

  • Sorry for the late answer, and thank you so much for your review!🤗 I corrected my code for the overlay!
  • I didn't quite get the part for " 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."... Could you explain what it does?
  • Should I create another media query or are you refering to the "@media screen and (max-width: 80rem) and (min-width: 50rem)" being for medium-large screens?

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 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)! 😁

  1

  ---

  

  Hoophelie•110

  @HOOPheliePosted over 3 years ago

  Hi, @ApplePieGiraffe ! Nice to see you again, and thank you for your review! I set the width of the image to 100%😁

  Happy Coding!

  1