HTML5 and CSS3

Community feedback

• 

  Shahin NJ•1,190

  @SJ-NosratPosted over 3 years ago

  Hi Zeshan, Beautiful work! Well done!

  However, did you notice that if you're in mobile mode while inspect-ing the code, and go into landscape view the .buttons class flows over the .text1 class; in other words it covers it. Also, you're limiting the heights of your <main> element, the solution is to comment the below parts of your code:

  html {
    max-width: 100%;
    font-size: 18px;
    font-family: "Bai Jamjuree", sans-serif;
    **height: 100%;** /* you must add this to your code */
  }
  
  body {
   /* height: 100vh; */
    width: 100%;
    min-height: 100vh;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  main {
    /* height: 100vh; */
    width: 100%;
    /* min-height: 100%; */
  }
  

  Also, you don't need to add widths to every element, allow the content to dictate the width of your page. max-widths is usually added to limit the size of the element to at most the 100% width; usually used for images to limit the size.

  Hope the above helps!

  Best of luck with your coding journey!

  Marked as helpful

  1

  ---

  

  Zeshan Abdullah•145

  @zeshanabdullah10Posted over 3 years ago

  @shahin1987 Thank you brother for taking out the time and reviewing my code. I will definitely keep your suggestions in mind. Thank you so much for the feedback.

  0