Challange with Sass, BEM, @media and grid

Community feedback

• 

  Ovidiu-Antonio•3,125

  @ovidiuantonioPosted almost 4 years ago

  Hello Jaronimas,

  Very good job! Your solution is looking very nice (i like the animations on the cards) and is responsive.

  To get rid of the horizontal scroll remove the width from the body element. You can make the gap between the columns smaller by defining the gap just for rows: grid-gap: 1.5rem 0; (1.5rem for rows, 0 for columns), and if you want an even smaller gap just lower the width of the container or increase the width of the cards.

  Happy coding and keep going!

  1

  ---

  

  Jaronimas•375

  @jaronimas-codesPosted almost 4 years ago

  Yes! Thank you very much - looks better, however 'the bigger gap" wasn't because of the gap, but because of column size, which was bigger than content - max-content helped me as well as justify content after that ;)

  Another question - in this web my preview of web looks smaller. Should I increase the size of components in desktop version?

  0

  

  Ovidiu-Antonio•3,125

  @ovidiuantonioPosted almost 4 years ago

  @jaronimas-codes Yes, you can increase the size a little bit, to get closer to the original design.

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hi there, Jaronimas! 👋

  Nice work on this challenge! 🙌 Your solution looks good and responds quite nicely!

  I'd like to suggest using a single <h1> tag for the heading of the page (since it is really just a single heading, not two separate headings). You can easily style the two parts of the heading differently using a <span> tag. 😉

  Keep coding (and happy coding, too)! 😁

  0