Profile Card Component - flexbox and mobile-first

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi Janelle,

  Your solution looks great on mobile portrait but breaks on landscape at the moment. See if you can figure out how to fix that (it will probably be a very small change)

  Looking at the html, I think you are misusing list elements at the moment. Lists have real meaning and none of these are quite right at the moment. The only part that may be appropriate for a list in this design would be the three stats at the bottom of the card, but that what you have as new uls should be the list items, and your lis should be spans.

  I hope this all helps. Keep on coding, you're doing great!

  1

  ---

  

  Janelle Schuh•90

  @jschuh23Posted over 3 years ago

  @grace-snow I actually just adjusted the first list I had (for the name and location) as I realized I needed to make that a heading element as it was in a section element (thanks to the frontend mentor html review :)). So I think that should make it better??

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @jschuh23 better but the next set of list needs swapping from three separate lists to one list

  0

  

  Janelle Schuh•90

  @jschuh23Posted over 3 years ago

  @grace-snow Got it! And adjusted the landscape view as well. :)

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi @jschuh23,

  Just had a look and I still can only see about half the card on mobile landscape. I don't actually think you should need any media queries for this challenge. Instead, all you're missing is the benefit of min-heights instead of height properties on some elements high in the dom. It is very rare I need to set a height on an element, but I will use min or max quite often. Using properties like that will allow elements to grow/shrink when needed.

  0

  

  Janelle Schuh•90

  @jschuh23Posted over 3 years ago

  @grace-snow Thanks Grace :) So I've been playing around with it all morning. Of course, came across some issues when I adjusted things but I was able to figure them all out and get everything set with min-heights or % heights. I also used min() for my card width and height to make it more responsive. That all being said I still was not able to find a solution where I don't need media queries for landscape orientation. Everything gets crunched together otherwise. When I put in the media queries it works and looks good (although I did have to throw one in for tablet and higher size so it wouldn't keep my landscape media query on the larger screens. It all seems way more complicated and messy than it needs to be....I just can't figure out why! I was thinking maybe it has to do with having a height on my card but then I would just need to add in padding/margin to space things and then use the media query to remove it for landscape. Ugh!!! Thanks for taking the time to help :)

  0

  

  Janelle Schuh•90

  @jschuh23Posted over 3 years ago

  And now when I open it on my phone (iphone se) it wants to scroll both on portrait and landscape. Even thought on dev tools all looked fine. Oh boy....I feel like I'm making things really complicated.

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @jschuh23 just had a look on my computer and it is behaving quite strange, it's very hard to figure out!

  I just made these changes in dev tools but even these aren't quite right... You definitely don't need to nest flexbox as much. And remember you can use a min and max width and an orientation on media queries if really necessary.

  main {
    /* flex: 1 0 auto; */
    /* height: 90vh; */
    flex-grow: 1;
  }
  
  .card {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* width: min(19.45rem, 80%); */
    /* height: min(20.7rem, 90%); */
    max-width: 400px;
    min-width: 280px;
  }
  
  .card__info {
    /* flex: 1 0 auto; */
    /* justify-content: center; */
    align-items: center;
    padding: 1rem;
  }
  
  section {
    /* width: 100%; */
    /* height: 100%; */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
  }
  
  .card__specs {
    /* position: absolute; */
    /* bottom: 0; */
    /* width: 100%; */
  }
  
  body {
    /* min-height: 100vh; */
  }
  
  .card__info--img {
    margin: 1rem;
  }
  
  

  Take a look at my solution and maybe that will give you some ideas :)

  0

  

  Janelle Schuh•90

  @jschuh23Posted over 3 years ago

  @grace-snow Cool. Thanks Grace! Yeah I felt like I was throwing flexbox around all over the place!!! I had looked at your solution a bit, but it also wasn't showing well on landscape?? I'll take a look at the above tomorrow. My brain is quite tired of trying to figure it out right now so I feel like I'm going in circles. Hahaha!!! Quick question....I want to create another branch so I don't keep adding useless commits. I know how to add the branch (git checkout -b <branchName>), however I can't seem to find anything online that references how you then view this branch say on my phone (which is where the problem is). I know I can 'Live Server' from the new branch on my computer, but I want to be able to test on my phone. Thoughts?? And thanks again for all your help! Ha looks like this challenge is leaving the newbie realm!!

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @jschuh23 yep it's definitely a lot trickier than it looks 😂

  When I deploy to netlify, I have set up an automatic branch deploy from my develop branch. That gets automatically deployed to the same url but with a develop-- prefix on the url. I don't know if there's a similar thing with vercel.

  But if there's not, you could set up a second deployment from the same repo that deploys a different branch to its own url

  0

  

  Janelle Schuh•90

  @jschuh23Posted over 3 years ago

  @grace-snow So....I created a test branch, commented out almost all of my CSS, then slowly started uncommenting. I was finally able to come up with CSS that allowed me to NOT set a height on card. That was good news because I was trying to get rid of that :) I was also able to remove one area where I had flexbox inserted (another bit of good news!). Most everything else remained the same. It seems I need to nest flexbox a bit because I have like three wrappers before I even get to the card. I tried a lot of different scenarios and most would pop up the footer and not stick it to the bottom or shrink my cards width automatically. I also made some adjustments to my heights and set them to 100% (html, body, wrapper) as I watched a tutorial about how vh can cause problems on mobile. Then I ran it on my phone and (hahaha) realized I have my phone set to zoom!!! So I changed that and in portrait mode I'm now not getting any overflow and when it does overflow I pinch the screen and it pops back to how it should look. I think the iphone's footer when in a browser is causing the primary problem there. Ok...I then found what I felt was a better option for a landscape media query - setting min-width and max-width (no orientation). All looked great in devtools! I used 560px for my low end as the small iphone is 568px. Thought all would come out good on my phone and the media query doesn't alter anything when I flip to landscape!!! Ugh!!! Sorry for the lengthy message! I have learned a ton in this challenge, just wish I could figure out this landscape mess!

  0