Kevin Powell - Community•11mo ago

Flexbox Scaling issues:

My portfolio site is having issues with flexbox not scaling to be the same size. The services section is inside one div with an ID of Services. I thought I had everything set up in the css to keep all services listed the same size, however they scale individually. Also, under the contact me section my email link and calendly link seem to become attached at different view port sizes. When the view port is smaller, they are separate, however as the page size increases they seem to merge. Thank you for the suggestions in advance. Replit with my code: https://replit.com/@Snowy7949/Demo-Site#index.html

Snowy7949

replit

Demo Site

Run HTML, CSS, JS code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter.

4 Replies

Wouter Schaap•11mo ago

Heya. There are a few things to make the code for services better than it is now, but to specifically solve your problem:

#services .service-bottom {
  align-items: stretch;
}

#services .service-item {
  justify-content: start;
}

#services .service-bottom {
  align-items: stretch;
}

#services .service-item {
  justify-content: start;
}

Then at the media query min-width: 768px you're setting:

#contact .contact-item {
  margin: 0;
}

#contact .contact-item {
  margin: 0;
}

That's why the email and calendly elements connect. If I might make a suggestion I'd really look into CSS Grid and for spaces between items look at the gap property. It works in both display: flex and display: grid. It takes having to use margins out of the equation. Makes live a lot easier all way round.

Louis•11mo ago

Hello! Wouter, I applied your changes and it fixed exactly what I was struggling with. I really can not thank you enough for taking the time to help me with this. I also appreciate your suggestion. I'm new to flexbox and I will look to use the gap property in the future. I understand if you don't have time to suggest, however you said there are a few things I should do to make the code for services better. Would you mind suggesting what I should do?

Wouter Schaap•11mo ago

@newhorizons1 easiest would be to take a moment to walk through your code together. Or maybe if I find time later today I'll make a codepen of my own. Feel free to reach out to me via DM

Louis•11mo ago

Thank you for the offer. DM has been sent.

Gaming

Programming

Flexbox Scaling issues: