Had an issue with positioning the buttons to the bottom of the cards. Maybe using 'position: relative' to parent div and then 'position: absolute' to buttons but I was not sure whether the web would remain responsive or not. I tried to use 'display: flex' to parent div and then 'justify-content: bottom' to buttons but that just messed up whole design. Any advice is welcomed.
Marie Pascale Brunelle
@mpbrunelleAll comments
- @kefiiiiRSubmitted over 2 years ago@mpbrunellePosted over 2 years ago
Hi kefiiiiR,
To answer your question about the alignment of the buttons:
If you add a
display: flex
on each card, you could then add aflex-grow: 1
on each.card-description
element. By default, flex-grow is set to 0, which means that each element never takes more space than the minimum. If you set this property to 1 on .card-description and not on the other elements, .card-description take all the space available and push the other elements to the top and bottom.Hope this helps.
Marked as helpful0 - @mouad-P7Submitted over 2 years ago
Feel free to check my solution and give me some advice to improve my coding skills.
@mpbrunellePosted over 2 years agoHello Moad,
To change the color of the image, you could explore <blend-mode> (used with the properties
mix-blend-mode
andbackground-blend-mode
).Here is what worked for me :
.img { mix-blend-mode: multiply; opacity: 0.75; }
Marked as helpful0 - @JRS-DeveloperSubmitted over 2 years ago
Hello, I would like to know if there is a better way to make the image color match as the design in the challenge because I see that my result does not look perfect.
@mpbrunellePosted over 2 years agoNice work, @JRS-Developer
Instead of adding an overlay on the image with a pseudo-element, you could use a blend mode on the image, like this:
.img { mix-blend-mode: multiply; opacity: 0.75; }
Marked as helpful1 - @PomPoko-labSubmitted over 2 years ago
I can feel my HTML and CSS improving. Any tips and advice are always welcome!
Thanks for your interest.
@mpbrunellePosted over 2 years ago@PomPoko-lab By the way, the tutorials mentioned above are free.
1 - @PomPoko-labSubmitted over 2 years ago
I can feel my HTML and CSS improving. Any tips and advice are always welcome!
Thanks for your interest.
@mpbrunellePosted over 2 years ago@PomPoko-lab
You did a great job reproducing the two layouts. However, to make your layout adapt to the viewport width, you might want to look into max-width, widths set in percentages, functions like min(), max(), calc(), clamp().
Here are some tutorials that might help you: https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts
Marked as helpful1 - @carlin-mitchellSubmitted almost 3 years ago
This one was difficult for me due to needing an overlay image and semi-opaque background at the same time. Fun times, and thank goodness for google! Also, sizing and centering the Ethereum and clock icons was not too fun. I would be curious to know if I went about it the right way or if there is something more efficient I could have done.
My main concern now is, how can I keep the footer info from creeping up over the card when I zoom in. I have yet to figure this out.
Any other comments/insights would be greatly appreciated!
Thanks!
@mpbrunellePosted almost 3 years agoHello,
CSS-tricks has published two articles on sticky footer that might help you solve your problem:
Good luck!
Marked as helpful0 - @mdajmalshadabSubmitted about 3 years ago
My background image is shrinking with change in screen size, I am unable to get desired result please help me out with this.
@mpbrunellePosted about 3 years agoHello,
Nice work. To solve the background problem, you could set the background-size property to cover on the body in the desktop media query:
background-size: cover;
0