unresponsive but adapted to mobile

Community feedback

• 

  Tharun Raj•1,330

  @Code-BeakerPosted 6 months ago

  Hello there, I visited your live site URL. Overall you've done a great job with the mobile design. However, some things need to be changed in your HTML.

  • The "Try It Free" button in the navigation bar must be a button or an a. It is supposed to be a link styled to resemble a button. So, consider not using div as a button as it ruins the HTML.
  • Same with the "Get Started For Free" button. It should be an anchor or a button. Don't use div to implement a button.
  • Please note that the heading levels should only decrease by one and not increase. Let me clarify it using a code block below: Don't do this:

  <h1></h1>
  <h2></h2>
  <h2></h2>
  <h1></h1>
  

  This will make it hard to navigate the website for users who depend on assistive technology like a screen reader. If you aim to achieve a specific font-size, style it using CSS instead of depending on heading tags.

  • Use rem units for font-size, margin, padding, border-radius, etc.
  • If you're feeling a little confused about the media query's syntax, you can try out a new syntax that is easier to read and understand:

  For a screen size that is less than 50rem:

  @media screen and (width < 50rem) {
  /* code here */
  }
  

  You can learn about this syntax and how to use media queries from this MDN Documentation

  Hope this helps you and good luck on your next project! 😃

  Marked as helpful

  0