Submitted over 1 year ago

Profile-card with custom CSS properties

newtothis90• 240

@newtothis90

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

If anyone could help me with the background images.

It seems that they are somewhat responsive unless I am missing something. I tried researching on how to get the background images in place for both the mobile and desktop with no success. If anybody has any tips on the css/html for that it would be greatly appreciated.

I used custom CSS properties throughout and instead of any semantic HTML, I just went ahead and used DIVS. I thought about using utility classes, but just thought the page was extremely simple to begin with.

Any other comments would be greatly appreciated!

Thank in advance!

Community feedback

Tushar Biswas• 4,080

@itush

Posted over 1 year ago

Congratulations on completing the challenge! 🎉

It is important to correctly understand CSS Position property to render HTML elements as per the requirement. Please note:

By default, all HTML elements are static (non-positioned elements).
By using top, right, bottom, left we can control the final location of an HTML element.
Top, right, bottom, left, z-index don’t have any effect on Statically positioned / non-positioned elements.
So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.

You may checkout 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first Workflow etc. in a simple way.

I hope this helps.

Keep at it...💻 Happy hacking!

Marked as helpful

newtothis90• 240

@newtothis90

Posted over 1 year ago

@itush

Great info! I'll definitely check out your discussion on those topics!

hitmorecode• 6,230

@hitmorecode

Posted over 1 year ago

It looks good, well done. For the background just add both images and then use position: absolute or position: relative and place them in position for mobile and for desktop. See if you can manage to do it, other wise let me know

Marked as helpful

newtothis90• 240

@newtothis90

Posted over 1 year ago

@hitmorecode

Ahhh. So it's not "exactly responsive", but uses media queries to place them in one position for mobile and another position for desktop.

I was trying to have them dynamically shift position as the screen size grew/shrank.

Thanks so much.

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