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