n00b center grid question.
I am fresh out of bootcamp at the end of March and working on my own porfolio page, got this card section for work experience right layout and size i want but for life of me can not getting it centered without doing a bunch of hacky margin and padding tricks making the responsiveness damn near impossible.. anybody willing to help a n00b out?
19 Replies
looks like you might be using bootstrap so not sure on the exact implementation but if it's a grid you should be able to do
place-items: centerNo bootstrap, all free hand Tailwind.. tried every center option under the moon .item-center, align-center, content-center, place-items-center etc etc.. must just have the settings done wrong
Ah got it. Not really sure without seeing more info about the html structure / styles you used
I'd say put it in a codepen but you're using TW so you'd have to convert it to regular css
GitHub link work?
I can take a quick look yea but don't have time to clone it locally right now
GitHub
BentoPortfolio/src/Components/Exp.js at main · Csolly89/BentoPortfo...
Contribute to Csolly89/BentoPortfolio development by creating an account on GitHub.
Oh geez this is a lot more convoluted than I thought; would it be possible to just make a minimal reproduceable example in a codepen? Shouldn't be hard to quickly create something in 5-10min to showcase the issue (and you might figure it out while making it too)
Wife got home and is working from home and had to kick me off.. so on my phone ATM.. thanks for looking at it though
Can I ask a kind of unrelated question? Why are you setting it up the way you are for a static (presumably) portfolio site?
Is this what they taught in bootcamp?
Bootcamp just taught us how to use Css not how to actually setup layouts or anything.. grid is what I've used last 2 projects without any issues cause they were side by side subjects (like Img to left, text on right)
Might try converting to flex and see if I can't get it stack that way
And yes the site will be static
Nah it's not really even so much a flex / grid issue, I was just wondering why you have everything set up as .js components
Nothing wrong with it if you can get the job done but if you're new it's probably convoluting things for you and it's (imo) using the wrong tool for the job if your site is going to be super simple
It's over-abstraction is how I look at it
Yea the file layout is how they showed us to do it in React.. worked so far, slowly learning bit by bit that wasn't the best bootcamp..
Not your fault -- stuff I've seen from bootcamps is they love pushing out this fully js approach when there's no need to. Like you could just have a few regular .html pages with a css file and it would massively reduce the complexity of it, and make it easier for you to focus on what's not working without having to jump through a few different files
I'll try to spin this up locally when I get done work in ~6 hours
Would be greatly appreciated
maybe adding col-start-3 will help to center it ??
or remove the col-span-5 and then justify-center should work
What @Mannix suggested worked, I removed the
grid-cols-9 class from this element and it centered it. After, you can put place-items: center if you want the items to not take full width of the container too
In
Exp.js:
Awesome, thank you guys
Sorry for being an inconvenience.. try to read up and understand it better for next time
no inconvenience at all 😎