Mobile-first e-learning Landing Page using SASS, BEM & CSS Grids

Community feedback

• 

  Adriano•42,870

  @AdrianoEscarabote

  Posted over 2 years ago

  Hi Deborah Robbiano, how are you?

  Congratulations on completing another challenge, I really liked the result of your project, but I have a few tips that I think you will like:

  I was having trouble finding a way that at higher resolutions my image would stay fixed while the resolution grew, to fix this I did the following:

  We will create the picture tag that will contain the image, and we will add 3 parent divs around it, I will call it divDad1, divDad2 and so on to make it easier to understand.

  in divDad1 we will put an overflow: hidden;.

  in divDad2 we will put a position: relative;.

  in divDad3 we will put a position: absolute;, and we will position it the way we want.

  Doing this the image will freeze as the screen resolution increases.

  I hope it helps and that it was clear, I'll leave an easier example below... 👍

  <divDad1 style="overflow: hidden;">
      <divDad2 style="position: relative;"
           <divDad3 style="position: absolute; + positioning"
              <picture>
                 <img>
  

  If in doubt, ask!

  the rest is great!

  I finished this project a few days ago, if you want to look, feel free!

  Hope it helps...👍

  13