Html Question posted in
Some basic documentation can be found here.

Html – Tailwind: Issues with flex, flex-col and lg:flex-row

I am trying to make a flexbox that shows four logos, and aligns them in the middle of the website.

I tried this code:

<div class="text-lg text-ODS-600 bg-ODS-100 rounded-lg p-2 text-center font-bold">
    <p>Thanks to:</p>
    
    <div class="flex justify-center">
        <div class="flex flex-col lg:flex-row justify-center items-center ">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
        </div>
    </div>
</div>

no matter what I try, the four logos are always vertically stacked, even on large screens. When I change the code into this, the logos are horizontally stacked:

<div class="text-lg text-ODS-600 bg-ODS-100 rounded-lg p-2 text-center font-bold">
    <p>Thanks to:</p>
    
    <div class="flex justify-center">
        <div class="flex flex-row justify-center items-center ">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
        </div>
    </div>
</div>

What gives? My other parts of the website are nice and reactive (I use the lg: tag regularly, and that works nicely). So, any suggestions why this is not working as it should?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It turns out, it was indeed the installation of tailwind through npm that was faulty. I was outputting the stylesheet in a wrongely named css file, therefore not updating the .css file I needed.


  2. 0

    First: notice the height. Try giving a background color to the flex div so you see the space it occupies.

    Second: don’t use justify-center in your third div, as it may overflow the content vertically (change this in the code below, where it says justify-start and use chrome devtools to see how it renders on a vertical screen).

    Here is the code I came up with, let me know if this is what you had in mind. Also, I am using the CDN version of tailwind. If it looks weird, try checking your installation.

    <div class="text-lg text-ODS-600 bg-ODS-100 rounded-lg p-2 text-center font-bold h-screen">
    <p>Thanks to:</p>

    <div class="flex flex-row justify-center h-full">
        <div class="flex flex-col lg:flex-row justify-start items-center">
            <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/972ff624287465.5633233a7a2ff.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/1dfafe24287465.563322f6c7f69.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/57680524287465.5633233a4c04e.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/2bd39124287465.5633231f3807a.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
        </div>
    </div>
</div>

    horizontal view

    vertical view (has scroll y)

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

Back To Top
Search