html/css, mobile first, BEM methodology

Community feedback

• 

  T

  Mike Hayden•1,005

  @mickygingerPosted over 4 years ago

  Hey Jasveen,

  You've done a great job with your BEM methodology, but I think you're slightly off the mark with your responsive design.

  Rather than fixing the mobile version to 375px you should make the mobile version 100% width, since you're not going to be sure how wide the user's viewport will be (iPhones range from 320px to 414px for example, and then iPads are wider again).

  Once you get to large tablets and desktop devices, you then would generally apply a max-width (normally around the 1200px mark), which stops the site looking stretched on laptop displays and large screens.

  If you resize your window on a desktop or laptop, your design should look good at any width, since the user could be viewing it on any screen size. Around the 700px mark your design starts to bleed off the edge.

  If you're a bit unsure where to start, open up the inspector, have a look at how we've done it on this site. You should see the breakpoints come in as you resize the window.

  Hope this helps! :)

  2
• 

  Briyk•15

  @briykjrPosted over 4 years ago

  Great job ! i suggest to edit border-color of header try not black , and also try to make some hover effect on social media icons and top navs

  1