Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

used flexbox

Yeni 180

@YeniUvwo

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


When i say i struggled with trying to get my background images to position a certain way across all media screen!! And then i came across Bryan Li's solution and how he tackled that so that helped solve that. Butttttt, when i view my page on my mobile phone, the border radius at the top of my top-image disappears and i see a straight border instead and my top image seperates from my profile card. Alsoooooo, when i view my page on screen rotate horizontally, the top image size reduces upto half of the profile card.

Community feedback

Bryan Li 3,530

@Zy8712

Posted

Your site looks pretty good. I tested your site with inspect and reduced the height of the browser and saw that it does get cut off. To address the issues with a part of the card being cut out, you need to change your justify-content: center to justify-content: flex-start inside a media query.

Though, when I tested using inspect and selected various mobile devices it doesn't get cut off. If you don't mind me asking what device did you use to test your website.

P.S. Apologies if any of my solutions have issues in them. Some of them are pretty outdated as they were made when I was still learning some basic concepts. If I have some time, I'll try to update some of my solutions

Marked as helpful

0

Yeni 180

@YeniUvwo

Posted

First off let me say, THANK YOU SO MUCH for taking time out to look through my code and profer a solution. The device is an iphone 12pro max @Zy8712

0
Yeni 180

@YeniUvwo

Posted

Exactly, it does not get cut off when i test using inspect as I was hoping i would be able to fix that during inspect but i couldn't because the problem wasn't coming up there as it did on my mobile phone.

Also, is there an alternative now for the vw and vh background image positioning? I noticed that when i wasn't using that to position my background images, my top image didn't get cut off. @Zy8712

0

Please log in to post a comment

Log in with GitHub
Discord logo

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