Centering circle
Justify, align, place ... this is driving me crazy.
So why isn't my
.red-circle centering inside the .circle-box with place-self: center;, when .katana is doing it inside of .sword. It's even disappering which just throws me off completely!
I just know there's some stupidly easy way of doing it, but I am missing it now ...
main.css in css folder:
https://github.com/AMarlonG/Japanese-style-responsivenessGitHub
GitHub - AMarlonG/Japanese-style-responsiveness: Creating a traditi...
Creating a traditional japanese card with principals from Jen simmons and Utopia fluid responsive calculations - GitHub - AMarlonG/Japanese-style-responsiveness: Creating a traditional japanese car...
28 Replies
I've made it work with some really hacky ways, like
align-self: center; and then adding margin. But that doesn´t feel sustainable ...you get a grid and you get a grid, everyone gets grid 🤣 don't you think you went a little overboard with the grid usage ?
Haha! Maybe, but at least for this issue removing the grid on the parent doesn't let place work. So if I remove grid on
.sword then the place-self on .katana doesn't work. I would love to make it work without! I just get so confused with the damn placement properties ... 😭you don't need grid on circle-box and sword at all
place-items: center on content-left should do all the jobyou are missing a semi colon in calc.css on line 6
there for your circle does not get a size, the variable
also the words they just flex bro no need for grid
you are also importing/adding the calc.css twice in html and css
with that semicolon it will work (did not change anything else)
... it's to late here in Norway now. I think that is the answer. 😅
9pm ain't late 😉
Ok, so it's all working now with all of your help. Thank you so much!
same time here in Netherlands,
But a few questions ...
I don't have to add the @import css in the css file, is that what you're saying?
no if you already loaded that file in html
cool!
And finally: using
place only works when you use flex or grid, right? justify / align can be used outside, but also with, a flex or grid container?