I have three FA icons in the one row of my CSS Grid.
The arent lining up across and seem to be stacking.
no bootstrap so what I know wouldn’t work.
Easy fix?
https://codepen.io/AmericanPi/pen/JZWBRG
*I have some troubles with class and id hierarchy so my css might be making causing this formatting.
Your icons aren’t stacking, they simply don’t exist.
There’s no fontawesome icon with the name of fa-camera-pdf or fa-camera-square. The only existing free options on fontawesome are fa-camera-retro and fa-camera.
I JUST REALIZED THAT!!!
Check it out now.
I also cleaned up my div
But they’re still stacking. I think it has to do with the centering of #content
Should I change my css or my html?
You want them to be displayed side by side?
If that’s the case, I would add an ID to the div that contains the icons (The outer one), and set its css to:
display: flex;
flex-direction: row;
justify-content: space-around;
okay. I was playing with id attr’s but nothing like all that flex stuff.
leme check it out.
tx @catanineto
sooooo. are you creating a flexbox there?
I’m asking because it’s interesting to note if i did that using CSS grid (more code than ur snippet) i would create a nested grid which I would have to place and all kinds of jazz. So this seems better for this instance.
But I feel like wrong using flexboxes in grid… but i guess it’s all CSS so it’s cool?
Yes, that div is being turned into a flexbox, it’s content are being distributed horizontally (flex-direction: row), and the spacing of the content is set so that the space-around every element is equal (justify-content: space-around).
I kinda suck at explaning, hope you understood what I meant.
But I feel like wrong using flexboxes in grid… but i guess it’s all CSS so it’s cool?
Grids and Flexbox can work together just fine, if possible, give this article a read:
yea that was good. I only mentioned that because I saw
display: flex;
and that’s how you create a grid too.
thanks for that article too…