Responsive meet landing page with Grid

Community feedback

• 

  P

  Eli Silk•660

  @elisilkPosted about 2 months ago

  Hi @edpau 👋,

  Thanks for commenting on my solution. That's much appreciated!

  I took a look at your solution for the hero image and it is a really cool approach. I definitely prefer solutions that make use of Flexbox over absolute positioning, so that is great and something I will want to try out myself.

  One small thing I noticed is that on the .hero-container class, you set the min-width: 1500px; and that results in the hero not being centered when the viewport width is between 1500px and your breakpoint at 1130px (and sometimes that means horizontal scrolling). I think you could fix that by just adding an overflow: hidden; to your .hero class. So maybe give that a try? 🤔

  I also like your README file. It's great that you explain some of the thinking behind the different aspects of your solution. For the footer, I think you should reconsider your current approach and take a look at this MDN article on "Multiple backgrounds":

  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds

  It says you can layer backgrounds on top of each other, but "Only the last background can include a background color." That is a little problematic for this situation because we effectively want the color to be on top of the image. However, you can get around that limitation by making the first/topmost background linear-gradient, and using an RGB color with an alpha value specified (so it's a little transparent). And then that semi-transparent color is layered on top of the second background, which in this case is the image. Here is an example that corresponds to what I did:

  background:
        linear-gradient(rgba(77 150 168 / 0.9), rgba(77 150 168 / 0.9)),
        url("assets/desktop/image-footer.jpg") no-repeat center center / cover;
  

  This multiple background approach feels to me a lot simpler than working with pseudo-elements and z-indices. Give it a try!

  Happy coding! 💻

  Eli

  Marked as helpful

  0

  ---

  

  P

  edpau•440

  @edpauPosted about 2 months ago

  Hi @elisilk ,

  Thank you so much commenting on my code. I learnt a lot from you.

  I have done the overflow: hidden adjustment and simplify footer background with overlay using linear-gradient as suggested.

  How did you find this awesome background colour solution? I am learning how to find better solution. What is your approach?

  Ed

  0
• 

  Matias Altier•130

  @matiasaltierPosted about 2 months ago

  Nice solution, practically the same and very good use of BEM. I really like your way of coding

  0