Mobile first site using SASS and BEM

Community feedback

• 

  Ivan•245

  @PeresvetIvanPosted over 4 years ago

  Hey David! Good job :) I think, you can make waves by using pseudo elements (for each block :before and :after), but i think your solution is ok.

  I'm interested in other solutions with waves too, maybe someone will share?) Couple of things that i noticed:

  1. In element "site-main__features-item-info-header" you don't need to use padding and set line-height to 0, you need just set property 'align-items: center', not 'align-self' property on the flex container of this element (in your example - "site-main__features-item").

  2. I recommend to use .container block which will be used as a wrapper for all internal blocks, to avoid prescribing padding for all of them. All internal blocks can be simply wrapped in a .container (.wrapper) block that has padding and margin set, and you don't need to specify the same padding and margin for all elements (they are usually the same). You can see how this is done in my solutions for example.

  3. I noticed , that element "site-main__image" element if you set the 'max-width: 100%' property, for some reason, will accepts the width of the source image, and with property 'width: 100%' will accepts the width of parent element. I don't know why this is so.

  Wish you good luck and would be grateful if you also check my solutions and will show any mistakes or easier solutions in them)

  1