Skip to content
OverviewSolutions
8
Comments
7
Marie Pascale Brunelle
@mpbrunelle

All comments

  • kefiiiiR•70
    @kefiiiiRSubmitted over 2 years ago

    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.

    Column Preview, HTML/CSS

    2
    Marie Pascale Brunelle•230
    @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 a flex-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 helpful
    0
  • Marie Pascale Brunelle•230
    @mpbrunellePosted over 2 years ago

    Hello Moad,

    To change the color of the image, you could explore <blend-mode> (used with the properties mix-blend-mode and background-blend-mode).

    MDN documentation

    Here is what worked for me :

    .img {
	mix-blend-mode: multiply;
	opacity: 0.75;
}
    Marked as helpful
    0
  • Jose Sanchez•380
    @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.

    Stats Preview Card

    1
    Marie Pascale Brunelle•230
    @mpbrunellePosted over 2 years ago

    Nice 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 helpful
    1
  • Marie Pascale Brunelle•230
    @mpbrunellePosted almost 3 years ago

    @PomPoko-lab By the way, the tutorials mentioned above are free.

    1
  • Marie Pascale Brunelle•230
    @mpbrunellePosted almost 3 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 helpful
    1
  • carlin-mitchell•20
    @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!

    Responsive card using flexbox and lots of googling

    2
    Marie Pascale Brunelle•230
    @mpbrunellePosted almost 3 years ago

    Hello,

    CSS-tricks has published two articles on sticky footer that might help you solve your problem:

    Good luck!

    Marked as helpful
    0
  • Marie Pascale Brunelle•230
    @mpbrunellePosted about 3 years ago

    Hello,

    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