Submitted almost 4 years ago

Profile card component

feszkesfene•20

@feszkesfene

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone,

this is my first challenge, it was quite the learning experience, because it seems so easy at first, but I was struggling a lot. I did a lot of trials and errors, searching for answers on stack overflow, etc. haha

I couldn't get the background work completely. It looks good on desktop version, but when the screen size gets smaller the two images disappear from the screen. I tried them as img elements with fixed position, but I decided to stick with background-image as both of them generated the same result and problem that I explained. Absolute position didn't work at all, the bottom image made the window scroll, and overflow hidden didn't help. Also I didn't find any reason to include media queries as this project is small and the card can also fit in the screen well, because I used CSS Grid and Flexbox. Anyway I included one media query to reduce the font-size to have more margin around the card in the mobile version. I used Sass. Maybe later when I have more experience or find out how to fix the background image problem then I will redo this project! Thank you so much for providing such a great content and challenges for us beginners!

I'm so excited!

Community feedback

aayushi simzia•355
@iucsimPosted almost 4 years ago
Hello feszkesfene,

Congratulations for completing first Frontend mentor challenge. Brilliant work on this challenge!

As a background-image part is quite tricky for this challenge I'm suggesting you to use relative units vh vw and % for background-position property.

Hope this will help you out.

Have a nice day :)
0
feszkesfene•20
@feszkesfenePosted almost 4 years ago
Hi @iucsim,

thank you very much for your feedback and tip! I've been working on it since your message, and I got a closer to the solution, but not completely. (I already had a look at other solutions to give me some ideas, but I don't want to copy/paste, that just kills the whole excitement and purpose of the challenge.) I'm not giving up, I will keep trying until I figure it out!

Thanks again, have a nice day :)
0

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