Mobile layout first, SCSS, BEM methodology

Community feedback

• 

  Wayne Haworth•90

  @WayneHaworthPosted over 3 years ago

  It is because you have "display: block;" on mobile/tablet sizes.

  Change this to flex for all widths (and you'll probably have to switch the flex-direction to column too) to fix this.

  Alternatively, you could not use a :before as an overlay. I generally stay away from :before and :after if possible as they can be tricky. If you check my solution: https://waynehaworth.github.io/FEM-Meet-Landing-Page/ I used a semi transparent background gradient over the top of a background image directly on the <footer>, like this:

  background: linear-gradient(rgba(77, 150, 168, 0.9), rgba(77, 150, 168, 0.9)), url(../images/image-footer-tablet.jpg);

  0

  ---

  

  Khalis•135

  @khalisabrahmanPosted over 3 years ago

  @WayneHaworth

  Alright! Never would have thought that "display: block" would affect the issue with the z-index. Thanks for the tips. Really appreciate it.

  0