Submitted over 2 years ago

Profile card component

Adarsh• 1,560

@adram3l3ch

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

It seemed like a very easy one until I trying to set the background. Even though I set position:absolute to those images it caused overflow. I dont know what the hell was goin on. I had never experienced this situation in my life. I set overflow:hidden to the global element and it fixed my problem half. I mean it fixed the problem but if I open the developer tool it still overflowing. Can anybody knows what the heck is going on :(

Community feedback

Kamasah-Dickson• 5,610

@Kamasah-Dickson

Posted over 2 years ago

I also experienced the same thing starting my project it took me a while to complete the design.

I dont think these intermediate designs are intermediate😂😂 Sometimes it is really stressful. you think you know something, you implement it and you get a different output it drains you out😓

Marked as helpful

Adarsh• 1,560

@adram3l3ch

Posted over 2 years ago

@Kamasah-Dickson Yeah 💯😂. I found position:fixed instead of position:absolute can fix the problem

Kamasah-Dickson• 5,610

@Kamasah-Dickson

Posted over 2 years ago

@adram3l3ch oh yh there is this design fylo dark theme I dont know i tried everything I couldn't position the the background svg. Its scales from the footer to the home section. I would like to see your solution on that design.

Marked as helpful

Web Wizard• 5,690

@rsrclab

Posted over 2 years ago

Hi, @adram3l3ch ~

Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

Here are some of the tips I like to provide.

On smaller devices, responsiveness doesn't work well, and I think that's because of viewport meta on html head.
Please try BEM for naming element classes. It will help you a lot on bigger projects.
For background, I suggest you to use css background-image property or pseudo elements like ::before, ::after.

https://www.frontendmentor.io/solutions/profile-card-solution-m-cH4D2Lp

Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

Cheers ~

Adarsh• 1,560

@adram3l3ch

Posted over 2 years ago

The issue in responsiveness wasn't due to meta but because of the overflow caused by the bg images. Now I fixed it by as you suggested using background-image. I took a look at your solution but it seemed overflowing in smaller devices same as mine :(

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