Mobile First

Community feedback

• 

  Akshay•810

  @akshaywebster

  Posted over 3 years ago

  Hi, there!

  Great work with the project!

  A couple of things to notice:

  • You've set your container's width to be 935px on screens greater than 700px with the help of the following media query:

  @media (min-width: 700px) {
      main {
          flex-direction: row-reverse;
          text-align: left;
          width: 935px;
          height: 370px;
          margin: 150px auto;
      }
  }
  

  So, it adds a horizontal scroll bar for screen sizes from 934px to 700px width.

  Here's a screenshot.

  What you can do is assign the main container a max-width of 900px, that way it won't have to force it on smaller screens.

  • Also, I noticed your container is not vertically centered, so please look into that. It should be fairly simple since you're already using Flexbox.

  I hope my feedback is helpful to you. Have a great day! :)

  11

  Marked as helpful