Mobile-first e-learning Landing Page using SASS, BEM & CSS Grids
Design comparison
Solution retrospective
Hi Guys! Another challenge completed! On this one, I got to learn how to resize svg files using the viewBox attribute and a bit more about CSS Grids. As usual, any feedback is welcome! Thank you ✨
Community feedback
- @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@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
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