skilled elearning landing page

Community feedback

• 

  Adriano•38,330

  @AdrianoEscarabotePosted about 2 years ago

  Hi David Martel Cloutier, 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...👍

  Marked as helpful

  0
• 

  David Martel Cloutier•60

  @DavidMartelCloutierPosted about 2 years ago

  why on the design comparison it has errors but on my project it does not have the problem of the bar at the bottom of the page which is not at the bottom

  1

  ---

  

  Adriano•38,330

  @AdrianoEscarabotePosted about 2 years ago

  @DavidMartelCloutier This is happening because your project is a little smaller than the one in the example so it leaves this space blank.

  Marked as helpful

  0

  

  David Martel Cloutier•60

  @DavidMartelCloutierPosted about 2 years ago

  @AdrianoEscarabote

  Ok thanks, do you think this is something to improve or as long as my site works and in a real browser it's ok?

  1

  

  Adriano•38,330

  @AdrianoEscarabotePosted about 2 years ago

  @DavidMartelCloutier We can further improve the appearance of the site at higher resolutions, for example. I noticed that the body is growing and the elements are stretching a lot at higher resolutions, to fix this we can do the following:

  @media screen and (min-width: 1200px) .container { max-width: 1110px; margin: 0 auto; }

  By doing this our body will not stretch and the page design will be much nicer at higher resolutions.

  However, as you can see the background images are also breaking, and this is not very cool, to solve this we would need to adapt our code to receive the max-width.

  We will use two divs, one that will receive the content and the max-width, and the other that will be the parent div will receive the background image, and will not receive the max-width causing the background image to continue stretching as the resolution increases.

  Marked as helpful

  0