Scoot w. SCSS + Vanilla JS

Community feedback

• 

  Roman Filenko•3,335

  @rfilenkoPosted over 4 years ago

  Hello Diarrah, good job there, You're are, there are a lot of rewrites with mediaqueries, so maybe try defning image as background and refactor a little bit code, so those markers will be inside that div. Good luck :)

  Roman

  2

  ---

  

  Diarrah•3,418

  @DiarrahPosted over 4 years ago

  @rfilenko Hmm I'd never think to do that. I'm going to give it a try + see if it's easier. Thanks!

  0
• 

  Henrique Andrade Vieira•190

  @VieiraHenriquePosted over 3 years ago

  Great job Diarrah ! I find your scss very clean! Congratulations !

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Hey Diarrah, nice work on this challenge! You've done a great job with the layout and responsiveness. I'd recommend reviewing the fonts one more time. The headings should be "Space Mono" as opposed to "Lexend Deca".

  Also, as Roman mentioned, you're doing quite a few re-writes in your media queries. I'd say this is mostly because you're using max-width as opposed to min-width. Using max-width media queries often leads to more CSS code as you write everything for desktop and layouts and have to re-write to move to a mobile layout. Whereas, with min-width the layout in mobile is often taken care of because of block-level elements stacking on each other. You then add more CSS to enhance the layout for larger and larger screen sizes.

  Your project looks great though. I hope you enjoyed building it!

  0

  ---

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Also, I didn't read your question fully before posting feedback! I'd agree with Roman about setting the map as a background-image and then using the same approach that you're using with position: absolute and % based positioning. That will help the locations stick in the correct place more consistently.

  0

  

  Diarrah•3,418

  @DiarrahPosted over 4 years ago

  @mattstuddert I've heard so many times to start with mobile first + then do MQs for bigger screens but it seems so strange to me lol. I'll give it a try on my next project.

  0

  

  Diarrah•3,418

  @DiarrahPosted over 4 years ago

  @mattstuddert I didn't know what you were talking about about the fonts but I checked on Chrome & the headings are Lexend but on Firefox it's MonoSpace. So weird.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @Diarrah very weird! Yeah, I'd definitely recommend trying mobile-first for a few projects. It takes a little bit of getting used to. But it's a great workflow!

  0