0

I'm working on a simple portfolio webpage with Astro.js, Tailwind and Svelte, although the problem I have is with css only.

This is the layout I want

The desired layout

I thought that this might be one flex-row container with the second container being a flex-column with 3 containers.

This is my code

<section class="overflow-hidden"> <!-- I dont know what this line does tbh -->
    <div class="container mx-auto mb-10 w-1/2">
        <div class="flex flex-row">
            <div class="w-2/3">
                <div class="flex flex-column"> <!-- I put this as flex-column in case i want to add some more images in the same column in the future -->
                    <div class="h-3/4 p-1 md:p-2">
                        <img alt="gallery" class="block object-cover object-center w-full h-full rounded-lg"
                            src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp">
                    </div>
                </div>
            </div>
            <div class="w-1/3">
                <div class="flex flex-column justify-center"> <!-- This doesn't work -->
                    <div class="p-1">
                        <p>P1</p>
                    </div>
                    <div class="p-1">
                        <p>P2</p>
                    </div>
                    <div class="p-1">
                        <p>P3</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

This is the result I have (i have added some blue borders in order for me to see the actual boxes)

Wrong layout with row instead of column

I'm a bit noob in web dev so I have no idea why isnt this working. Does somebody know what's happening?

RabidTunes
  • 775
  • 1
  • 8
  • 21
  • 1
    it's `flex-col` not `flex-column` – Temani Afif Nov 05 '22 at 10:35
  • You must be use flex-col not flex-column – berkesasa Nov 05 '22 at 10:36
  • In my case, to figure out why mine wasn't working, I needed to eliminate all other components like Flowbite Card and just strip it down to basic `div` elements and see if I could get the Tailwind classes working then. Then I could re-add other fancier components. – Ryan Jul 24 '23 at 21:13

1 Answers1

0

As someone pointed out in the comments, it's flex-col not flex-column

RabidTunes
  • 775
  • 1
  • 8
  • 21