Tailwind CSS Site not showing responsive version

Question

When I view this site in Chrome and use dev tools to view mobile site it correctly shows as 1 column but when viewed from iPhone still 2 columns?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body class="h-full font-proza">
<div class="container mx-auto flex justify-center">
    <div class="w-2/3">
        <!-- Two columns -->
        <div class="flex mb-4 flex-wrap md:flex-no-wrap">
            <div class="w-full md:w-1/2 md:mr-10 mr-0">
                Left Text
            </div>
            <div class="w-full md:w-1/2 mt-10 md:mt-0">
                Some Text
            </div>
        </div>

    </div>
</div>
</body>
</html>

Please read [what this site is about](https://stackoverflow.com/about) and "[How to ask](https://stackoverflow.com/questions/how-to-ask)" before asking a question. — 4b0, Feb 27 '19 at 05:34

score 22 · Accepted Answer · answered Feb 27 '19 at 05:40

Add the meta tag in your HTML.

A 'meta' viewport element gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

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

Tailwind CSS Site not showing responsive version

1 Answers1

Linked