Issues with flexbox

Hi guys I am doing some practice for css because I am really bad and I am also learning tailwind at the same time. my problem is I don't now why I can justify-center a div is what I am doing impossible or what am I doing wrong
<div className="flex justify-center items-center gap-[4.5rem] h-[55vh]">
<div className="flex-col justify-center">/*ISSUE*/
<h1 className="font-extrabold text-6xl">Ondesk is you Remote</h1>

<h1 className="font-extrabold text-[#f7b300] text-6xl">
conference calling tool
</h1>
<p className="gap-5">
Ondeck is a service that allows you to create beautiful, online, and
encrypted video calls for <br /> you and your remote team.
</p>

<Button className="mt-1" />
<p>
5.0 rating based on reviews from:
<Image src={Capterra_Logo} />
<Image src={AlternativeTo_Logo} />
</p>
</div>

<div className="w-80">
<Image src={Hero} />
</div>
</div>
<div className="flex justify-center items-center gap-[4.5rem] h-[55vh]">
<div className="flex-col justify-center">/*ISSUE*/
<h1 className="font-extrabold text-6xl">Ondesk is you Remote</h1>

<h1 className="font-extrabold text-[#f7b300] text-6xl">
conference calling tool
</h1>
<p className="gap-5">
Ondeck is a service that allows you to create beautiful, online, and
encrypted video calls for <br /> you and your remote team.
</p>

<Button className="mt-1" />
<p>
5.0 rating based on reviews from:
<Image src={Capterra_Logo} />
<Image src={AlternativeTo_Logo} />
</p>
</div>

<div className="w-80">
<Image src={Hero} />
</div>
</div>
here is my code A screen of my code and what I am trying to do
<div className="flex-col justify-center">/*ISSUE*/
<div className="flex-col justify-center">/*ISSUE*/
Not matter what I do I can move the content inside the div I try using gap or just moving with margin or padding nothing happens please help 🙂
No description
No description
19 Replies
majkl
majkl10mo ago
Where is the CSS, please? Can you possibly do a codepen showcase?
Stanicks
StanicksOP10mo ago
@majkl I am using tailwind so the className is the csss
majkl
majkl10mo ago
I only scratched tailwind on the surface co I cannot tell. But surely thre is some stylesheet, isn`t it? I need a compiled HTML/CSS/JS that I can look into directly.
Stanicks
StanicksOP10mo ago
do you know anything about react ?
majkl
majkl10mo ago
Nope.
Stanicks
StanicksOP10mo ago
RIP haha let me see if I can compiled in html and css/js
majkl
majkl10mo ago
On cursory look, this is a clear case for grid with columns such as 1fr, max-content with children centered vertically.
Stanicks
StanicksOP10mo ago
you mean I should be using grid for the layout ? because I am currently using flexbox
Stanicks
StanicksOP10mo ago
No description
Stanicks
StanicksOP10mo ago
also I can't export it in to the html and css/js
majkl
majkl10mo ago
They are quite similar in a sense an can be combined. For instance for the the top wrapper I would be thinking of div {display:grid; grid-template-columns:1fr max-content;...} ...and inside it a div with text content and an image.
majkl
majkl10mo ago
How would you think I can play around with code in screenshot? Please have a look at https://codepen.io/.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
Stanicks
StanicksOP10mo ago
it doesn't work https://codepen.io/ my code is in jsx
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
Stanicks
StanicksOP10mo ago
ill keep looking tho
majkl
majkl10mo ago
Ok, no good with me then, I would need to see what it is rendering.
clevermissfox
clevermissfox10mo ago
Put an outline on the divs children to see, they could be taking up the full width. What happens if you target that div and justify-content: center from a vanilla css stylesheet? Have you looked in dev tools to see if it’s being declared or not? Would also recommend learning vanilla first if you are , in your own words “really bad”. Memorizing tailwind classes should come after you know what you are doing with vanilla css. Stepping off my soapbox now 🤣
Stanicks
StanicksOP10mo ago
I know what you mean but I feel like tailwind is much easier because I have dont have come up with 100 different class names haha but yes I should get better with vanilla css 😂
clevermissfox
clevermissfox10mo ago
But you have to write those class names 50x to get one style on 50 elements instead. I hear what you’re saying though, that’s the most common reason I’ve heard about why ppl like tailwind.
Kevin Powell
Kevin Powell10mo ago
If I'm seeing this correctly, the issues is that you're <div className="flex-col justify-center"> isn't working. I'm not a tailwind person, so correct me if I'm wrong, but, you have your first div, that is flex. That's the flex container. Then, inside there, you have another div with flex-col, which sets a flex direction... but you can't set a flex direction here, because it's a flex item, not the flex container. The same applies to the justify-center You also have 2 h1, which you can't do. Better would be
<h1 className="font-extrabold text-6xl">Ondesk is you Remote <span className="font-extrabold text-[#f7b300] text-6xl block">conference calling tool</span></h1>
<h1 className="font-extrabold text-6xl">Ondesk is you Remote <span className="font-extrabold text-[#f7b300] text-6xl block">conference calling tool</span></h1>
I'm assuming you want the second part on it's own line, so I added block to that one too. Also, isntead of changing the flex direction and trying to center it with justify, I'd completely remove the <div className="flex-col justify-center"> entirely. Just delete it, and use align-items: center instead: <div className="flex align-center items-center gap-[4.5rem] h-[55vh]"> And lastly, I would say learning Tailwind while learning CSS is similar to learning React without having learned JS first... it can be done, but it's probably not the best idea if you want to get a good understanding of what's going on.
Want results from more Discord servers?
Add your server