Skip to content
OverviewSolutions
14
Comments
6
Pablo Montoya Varela
@PaliTriesToDesign

All comments

  • Pablo Montoya Varela•300
    @PaliTriesToDesignPosted over 2 years ago

    Hello! This solution looks great.

    I would just point out one small thing that I learned from Coder Coder on YouTube. On your section-body-text class you are using both top an bottom margins. According to Coder Coder, it would be better if you get used to adding either margin-top or margin-bottom to your elements but not both. From my pov, it is better adding margin-bottom to each element. i.e:

    .section-icon {
     margin-bottom: 2rem;
     ...
}

.section-heading {
     margin-bottom: 2rem;
     ...
}

.section-body-text {
     margin-bottom: 2rem;
     ...
}
    Marked as helpful
    1
  • Pablo Montoya Varela•300
    @PaliTriesToDesignPosted over 2 years ago

    Hello!

    For the desktop version it seems like there's an issue with the input icons. You can avoid using position: absolute as you can actually set a background image to the inputs:

    background-image: url(/images/icon-dollar.svg);
background-repeat: no-repeat;
background-position-y: center;
background-position-x: 1rem;

    Hope this helps. c:

    Marked as helpful
    1
  • Pablo Montoya Varela•300
    @PaliTriesToDesignPosted over 2 years ago

    Hello!

    Try adding position: relative to your advice-card div. Then, you could adjust your refresh-btn with the bottom: property but most important (I think), try this with your right: or left: property: right: 50%; transform: translateX(50%);.

    This should center your button horizontally relative to your card.

    Marked as helpful
    1
  • riverCodes•300
    @riverCodesSubmitted over 2 years ago

    First time attempting a mobile-first workflow. Any feedback is appreciated, especially regarding the responsiveness of the page! Thanks.

    P.S. I know the design looks a bit off from the original, and I was wondering if that's only because of me not having access to the exact measurements and sizes, or am I actually doing something wrong?

    Responsive Stats Preview Card Component

    1
    Pablo Montoya Varela•300
    @PaliTriesToDesignPosted over 2 years ago

    Hello!

    Actually I think it looks pretty good. Congrats.

    On your .image-container media query you can reduce border-top-left-radius: 0; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; to border-radius: 0 1rem 1rem 0;

    Marked as helpful
    3
  • Bence Zámbó•510
    @zambobenceSubmitted over 2 years ago

    I found it quite challenging to position the profile picture in the middle, at the end I have decided to position it absolutely. I am very interested if there are any more dynamic ways to position it.

    I could not figure out how to set the background of the body so I just used a gradient, although aI would really like to know the solution for that.

    Card Component Main using flexbox

    2
    Pablo Montoya Varela•300
    @PaliTriesToDesignPosted over 2 years ago

    Hello!

    I faced the same challenge with the background images. After researching a little bit in google I found out that you can use more than one image as a background image. Something like this: background-image: url(/yourImage), url(/anotherImage); and then add properties to position correctly both images. I am not an expert but I hope it gives you just enough to find out the solution.

    Marked as helpful
    0
  • Pablo Montoya Varela•300
    @PaliTriesToDesignPosted over 2 years ago

    Congrats! I like your solution.

    I would add just one more thing: box-shadow to the card. Nothing important.

    c:

    Marked as helpful
    1