Question 336149 in CSS Question posted in
Some basic documentation can be found here.

Css – Tailwind Justify fail

I tried using Justify on my tailwind flex but it isnt working

I tried refreshing the page, deleting browser history then refresh, try all of the flex (the justify, justify items, align, align items, etc)

    <main class="flex-grow text-slate-900 font-kadwa bg-stone-200">

        <p class="mx-5 my-5 text-4xl text-center md:text-6xl md:text-left">Top News</p>

        <div class="md:flex md:justify-center">

            <img src="default.jpg" class=" shrink rounded-xl w-screen h-30 md:w-full md:h-full md:mx-5">

            <div class="">

                <p class="text-2xl text-center my-3 md:text-left md:mx-5 md:text-4xl md:mb-10 2xl:text-6xl">LOREM IPSUM</p>

                <p class="text-wrap mx-5 text-sm text-center md:text-left md:text-xl 2xl:text-3xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                <a class="mx-5">Read more...</a>

            </div>

        </div>

    </main>

Result : enter image description here

What I expected : enter image description here

Tags:

2

Answers


  1. 0

    What I understood is the width is not working? It is not the issue with justify and the solutions is to define width for both of the flex items.

    Login or Signup to reply.
  2. 0

    Here the code is as per your requirement. I have set both sections to 50% and set them to justify and align.

    <main class="flex-grow text-slate-900 font-kadwa bg-stone-200">
    <p class="mx-5 my-5 text-4xl text-center md:text-6xl md:text-left">Top News</p>
    <div class="md:flex md:justify-center gap-5 item-start">
        <div class="flex-1">
            <img src="https://picsum.photos/300/200" class="rounded-xl w-screen h-30 md:w-full md:h-full md:mx-5">
        </div>
        <div class="flex-1">
            <p class="text-2xl text-center my-3 md:text-left md:mx-5 md:text-4xl md:mb-10 2xl:text-6xl">LOREM IPSUM</p>
            <p class="text-wrap mx-5 text-sm text-center md:text-left md:text-xl 2xl:text-3xl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a class="mx-5">Read more...</a>
        </div>
    </div>
</main>

    If you can set the image section to be small, just set the width of the image section, it will work fine.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search