Contact section of portfolio project

Hello,
I’m not sure why all of my links in the contact section are crowded next to each other. I am having issues identifying which piece of CSS allows the links to be spaced out nice and evenly

https://codepen.io/platform6/pen/GRJddXy

Thank you!

Hi Platform 6.
You never gave the a elements in the contact-links section the flex setting.
I put in flex: 1 for all of the a elements and bam, spaced out.

.contact-links > a {
flex: 1;
}

You can also set justify-content: space-evenly on the .contact-links container.

Hi @platform6 I’ve seen you links css class there you have used display "flex’ with center justify-content which is good. To spaced evenly use padding in .contact-details in shorthand style

> Ex: padding : 0 20px;

and inside contact-links class max-width is not needed.

@KalvaNaveen Adding padding to links is a good idea, but not so much to space them, but just so it is easier to click them. Especially on mobile devices.

Flexbox already gives you spacing controls using justify-content: space-* (around, between, evenly). If you use that, then max-width is needed to control how wide the container is to limit the spacing added.

@lasjorg I got it and but those links in wide screen take huge space b/w links if we use space-*. so individual space is better when compare to parent property.

in Mobile screens also it works because we are applying to child not to parent.

  • any way thanks @lasjorg for explaining

That is what the max-width is for, to limit how much space is used.

I don’t agree that controlling the spacing on the child elements is better. Using the parent container to distribute the space makes more sense to me.