Profile Card Component - flexbox and mobile-first

@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??

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

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

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.

@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 :)

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.

@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 :)

@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!!

@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

@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!