Design comparison
Solution retrospective
I found getting the height of the image in desktop view the most challenging.
I tried using '100vh', something I had never used before and couldn't figure out how other solutions used it correctly.
Everytime I set the height to the parent element instead of to the actual background element, it would enlongate the entire container and I would have a really long image and short text.
And when I tried to set min-height: 100vh I couldn't see the image at all.
So I just used image tags, gave each image its own seperate class, and set one to display: none and another to display: inline.
Even though it worked I still had to finesse the height and set it to 40% instead of 100% so the container wouldn't be too long.
The question is why can't the image be the same height as the text beside it, without adding a fixed height or guessing a percentage?
I used flex to center the container on the main and cross axis, but in desktop and other mobile screen sizes I have all of this extra space at the bottom.
Is there a way to get the card in the middle of the screen or will there always be extra space at the bottom?
Overall, this was a fun project and a great intro into coding. Can't wait to do more.
Community feedback
- @codedforfreePosted about 2 years ago
Hey Lisa,
Good try. Indeed you could set
Html, body {height:100%}orbody {height: 100vh:}. Furthermore, I would read a bit about thepictureelement. Here.Another thing I would do is make the 'perfume' text uppercase and add some letter spacing to it. Next to that, I would check my overall widths a bit better.
But this is a good start to learning and working on your front-end skills, so keep it up.
Marked as helpful0@lisacodesnowPosted about 2 years ago@codedforfree Thank you for the picture resource it was helpful and the height suggestion. It makes more sense now.
0 - @behubjPosted about 2 years ago
Hey Lisa, Well try you tried your best to complete your project, i appericiate that.
If you want to center your "container_wrapper" you have to fix your code{ Do (html,body: height-100%;)} it will fix your code and your <div> comes in center horizontally and verically.
Hope it will help you and if you want you can check my solution. Happy coding...
Marked as helpful0@lisacodesnowPosted about 2 years ago@behubj Thank you very much for the help! I set the body height and bam there it was.
0 - @NationsAnarchyPosted about 2 years ago
Hey Lisa! As I always tell myself, no matter what we code - we can always improve on it by learning and doing.
Since there are two great comments above already, I can also suggest you to check the HTML Report option, as there are a couple of things you can do to make your HTML file more structruely correct and usable.
Keep it going! I believe that you're in the right track, and I hope you have fun doing this as much as I do.
Phúc (Scott).
0@lisacodesnowPosted about 2 years ago@NationsAnarchy Hi! Yes, I noticed the html errors, there's alot of them. I used a boilerplate and alot of the errors are from the boilerplates code. I honestly don't know what a majority of that stuff is, but I can do it from scratch next time for these smaller projects. Thank you.
0@NationsAnarchyPosted about 2 years agoThose are like neat-picking details, however you can look at them and learn how they work + why they are required to be that way - so feel free to look them up later when you want to :D
0@lisacodesnowPosted about 2 years ago@NationsAnarchy Thats a good tip! I didn't think about it like that. I'll have to Google some of that code, because I don't know what it is lol Thanks!
0
Please log in to post a comment
Log in with GitHub
Join 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