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
Heya. There are a few things to make the code for services better than it is now, but to specifically solve your problem:
Then at the media query
min-width: 768px you're setting:
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.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?
@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
Thank you for the offer. DM has been sent.