Skip to content
OverviewSolutions
2
Comments
3
Afolabi Oseni
@GoldenAceTech

All comments

  • luccaslopes88•130
    @luccaslopes88Submitted almost 4 years ago

    Hi :D I've almost did the challenge, had a problem with desktop size. Couldn't make the container smaller. Any tip or feedback on that ? thanks guys

    testimonials grid challenge

    1
    Afolabi Oseni•105
    @GoldenAceTechPosted almost 4 years ago

    Hi LUCCASLOPES88, well done on your solution. However, I do not think giving the container a height is the best idea. In order to make it responsive, do not give it a height and make use of media queries to set your grid-areas for each screen size. Check out my solution here to see how I solved and you can give me a feedback on that too. Have a good day!

    0
  • Afolabi Oseni•105
    @GoldenAceTechPosted almost 4 years ago

    Hi Shadib, good job on the challenge. For my suggestion, you can position the background images properly using relative units like vh and vw, check out my solution here to see how I used it. You can check out the repository to get a better understanding. Other than that I think you did a great job. Have a good one!

    0
  • Fauzan Reza•180
    @codebyfauzanSubmitted almost 4 years ago

    How to centering the profile image when it becomes a position: absolute? Also how to masking bg-pattern-card to the parent div, because I need to give it border-radius too just to make parent div has a smooth border

    Profile Card Component Using FLexbox

    2
    Afolabi Oseni•105
    @GoldenAceTechPosted almost 4 years ago

    Good effort Fauzan. However I think you should try using bg-pattern-top, bg-pattern-bottom and bg-pattern-card as backgrounds instead of images. There are different background properties like background: url();, background-attachment, background-size and background-position that can be useful for those and make them more responsive. Also for the profile image you can use negative margin-top to displace it from its normal position to the top without having to worry about moving away from the center. However, if you must use position:absolute; try making the parent container *position:relative; * so it doesn't displace too far away from it's parent element and you can easily place it where you want. Check out my solution here to see how I made it responsive. I also made a github repositiory for it, let me know if you have any questions I will be glad to clearify and you can give me a feedback on my solution too. Keep Coding! you got this.

    3