CODEWITHSUNDEEP
htmlcsslaravel-bladetailwind-css
triblion
triblion

Reputation: 35

Tailwind Responsive Design not applying

I have this code which is meant to display two tables side by side on desktop and above. But on mobile display them stacked on top of each other. I have managed to make one or the other work. In the the sm: tag is ignored entirely and it just uses the first one. So I can't make both work. The responsive tags work for all the other times they appear in the code, just not this scenario. I can't change between flex-col and flex-row for whatever reason between mobile and desktop

EDIT: Looks like it's now not working in a couple other places as well not just here, for example <div class=text-xl md:text-4xl">. It will only render xl not 4xl

<div class="container 2xl:max-w-screen-xl mx-auto pb-8">
    <h1 class="text-3xl font-bold text-gray-200">ID</h1>
    <p class="text-gray-400 italic">Time</p>

    <div class="flex flex-col sm:flex-row">
        <div class="flex flex-col sm:flex-row">
            <table id="Y_table" class="w-full mt-2 row-border table border border-gray-700 rounded">
                <thead class="bg-gray-800 text-gray-500 uppercase text-xs sm:flex-row">
                <tr>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                </tr>
                </thead>
            </table>
        </div>

        <div class="flex flex-col sm:flex-row">
            <table id="X_table" class="w-full mt-2 table row-border border border-gray-700 rounded">
                <thead class="bg-gray-800 text-gray-500 uppercase text-xs">
                <tr>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

Upvotes: 1

Views: 1266

Answers (1)

Levi He&#223;mann
Levi He&#223;mann

Reputation: 170

Do you have the viewport tag in your head meta?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Upvotes: 5

Related Questions