Submitted about 3 years ago

My first project! HTML & CSS (Flexbox)

david• 120

@davidtrikic

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had issues with background image positioning. Couldn't get it to match desktop and mobile designs (responsively). Any hint on that?

Community feedback

Samuel Palacios• 615

@samuelpalaciosdev

Posted about 3 years ago

Hi, David👋

Great job on this challenge. Your solution looks good and it scales pretty well👍

I only suggest some things 😉:

You don't have a h1 on this project as it stands. Headings provide valuable information by highlighting important topics and the structure of the document. For this project, I'd set it where is the person's name.
About the background image, I'd recommend you to use viewport units, especially vw in this case, I suggest you to watch this video

I hope this would help you, have a nice day, keep coding!💙

david• 120

@davidtrikic

Posted about 3 years ago

@samuelpalaciosdev Thank you Samuel! I didn't use a H1 tag here because I somehow understood this project as a single component for a website, not website as a whole. But you are definitely right. And vw & vh units were a proper way to do a background image, as Juan noted.

I'm subscribed to Kevin's channel but I missed this video! :)

Thanks and you have a nice day too 🙂

Samuel Palacios• 615

@samuelpalaciosdev

Posted about 3 years ago

Hi david, yep, I see it too as a single component, I just said that about headings in case you don't know it😅. Kevin is an incredible instructor, if you don't know, he has a free course about responsive layouts I think it could help you ;)

JuanCFS• 160

@juancfs

Posted about 3 years ago

Hi David. In regards to the background image matching the desktop and mobile devices, try changing the units for the body background-position property from pixels to the viewport (vw and vh) units. This way the background should adapt with respect to the browser's viewport and the problem should be fixed.

david• 120

@davidtrikic

Posted about 3 years ago

@juancfs Yes, that solved it! I have tried using vh and vw units but I guess I got them mixed up (x an y axis) so it wasn't working for me

Thank you for your feedback

Kingsley Agu• 285

@didyouseekyng

Posted about 3 years ago

I think I'm going to try this, I'm having the same issue with my background images, I guess I'll have to make use of vw and vh units more!!

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