Skip to content
Submitted about 1 year ago

used flexbox

Yeni•180
@YeniUvwo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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
    @Zy8712Posted about 1 year ago

    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
    @YeniUvwoPosted about 1 year ago

    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
    @YeniUvwoPosted about 1 year ago

    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

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