Desktop first GRID responsive layout using SASS and BEM.

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hey, Agnieszka Urbanowicz! 👋

  Well done on this challenge! 👍

  The only small thing I suggest is using a single heading tag for the heading of the page (since it is really just a single heading, not two separate headings). You can style the two parts of the heading differently by wrapping on of them in a <span> tag and modifying the styles of the <span> tag within the heading. 😉

  And I second tediko's helpful suggestion about the layout of the site! 😀

  Keep coding (and happy coding, too)! 😁

  0

  ---

  

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  Hi there @ApplePieGiraffe, thank you so much for your feedback :) You are right indeed, it looks like it is single heading, the CSS repeats itself. Thank you for pointing that! I did not notice before :)

  0
• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Agnieszka! 👋

  Congratulations on completing the next challenge! You add margin to your .card__container element which causes that horizontall scroll appear. Margin is a shorthand for margin-top/right/bottom/left. Instead, give only margin-top: -150px (for example, you don't have to keep it with percentages). Now you have to add some z-index to your .heading since your .card__container is now retracted and overlaps on heading so you can't select text here.

  Good luck with that, have fun coding! 💪

  0

  ---

  

  P

  Axseinga•430

  @axseingaPosted over 3 years ago

  @tediko Thank you for your feedback :) I changed margin: to margin-top: however the scroll still appears, it doesn't show on the full screen. I am not sure what you mean about .heading. All looks alright after the change.

  0

  

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  @axseinga Can't see because your page doesn't update your changes yet. About .heading z-index, move your mouse to heading--text paragraph and try to select it, like you would want to copy this text. This is impossible because with negative margin, your .container overflows this - that's why we need z-index on .heading. Hope it makes it more clear ;D

  0