skilled elearning landing page
Design comparison
Solution retrospective
Hi,
It took me about 3 days to complete. I had a little difficulty placing the elements but with patience I got there. It's not perfect and the code isn't the prettiest but this is my biggest projects in about 8 months of learning, I learned more in 3 days when 8 months.
Thanks for the advice and help you are going to give me.
Community feedback
- @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 helpful0 - @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@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 helpful0@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@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 helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord