Submitted about 3 years ago

Profiles-card-component-card using Flexbox

Max• 60

@maxlopzb

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Grace• 27,710

@grace-snow

Posted about 3 years ago

Hi, The card looks OK viewing on mobile, but see if you can sort the background images on mobile, portrait and landscape. Also on mobile, make sure the card doesn't touch any sides of the screen, even on landscape.

Good luck

Grace• 27,710

@grace-snow

Posted about 3 years ago

Looking at html there are 2 bigger problems

You're not using any semantic html at all. Text can't be in spans or divs alone, you need to use meaningful elements.
Alt text is only needed on meaningful images (like the profile pic). So where you have alt="bg pattern card" that should be alt="" so assistive technology and search engines know it is only decorative. As that particular image is an svg, I also recommend adding aria-hidden="true" because it will stop safari voiceover from announcing that image.

Hope this helps

Max• 60

@maxlopzb

Posted about 3 years ago

Thank you Drallas for the feedback. I was having a hard time trying to fix the background images, now i have an idea on how to fix it. Thank you again.

drallas• 375

@Drallas

Posted about 3 years ago

Hello Max

It's just a big too big and did you noticed that the mobile card is slighty smaller than the desktop one?

I don't think two divs are needed!

    <div class="bg-body-1"></div>
    <div class="bg-body-2"></div>

You can be set multiple background images on one div, positioning is tricky..

background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
    background-position: ???;
    background-repeat: no-repeat, no-repeat;

It's hard and requires tweaking the values. left -??rem top -??rem, right -??rem bottom -??rem the exact values I leave for you to figure out, that's part of the fun!

Please log in to post a comment

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