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

Community feedback

• 

  Adriano•38,410

  @AdrianoEscarabotePosted about 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...👍

  1

  ---

  

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  @AdrianoEscarabote Hi Adriano! Thank you so much to have looked at my solution! I've been coding all day so I need to rest but I'll look into your proposal tomorrow (because I'm not sure I get it now, my brains have melted ;). Thank you again!

  0

  

  Adriano•38,410

  @AdrianoEscarabotePosted about 2 years ago

  @debriks have a nice rest! :)

  1

  

  Deborah Robbiano•600

  @debriksPosted about 2 years ago

  @AdrianoEscarabote Thank you!!

  0