CODEWITHSUNDEEP
csstailwind-css
user13532951
user13532951

Reputation:

How to hide specific text on mobile in Tailwind CSS?

I have this code:

<div class="max-w-7xl mx-auto grid sm:grid-cols-1 md:grid-cols-3 pt-6 gap-8">
    <div class="col-start-2 col-span-2">
        <h3 class="text-4xl pb-3">Text 1</h3>
        <p class="text-2xl">Text 2</p>
    </div>
</div>

and I need to hide this whole div on mobile. I already tried the suggestion from this GitHub issue: https://github.com/tailwindlabs/tailwindcss/issues/841

<div class="hidden md:block max-w-7xl mx-auto grid sm:grid-cols-1 md:grid-cols-3 pt-6 gap-8">
    <div class="col-start-2 col-span-2">
        <h3 class="text-4xl pb-3">Text 1</h3>
        <p class="text-2xl">Text 2</p>
    </div>
</div>

but this hides nothing. I then tried the following code, by adding invisible md:visible

<div class="invisible md:visible max-w-7xl mx-auto grid sm:grid-cols-1 md:grid-cols-3 pt-6 gap-8">
    <div class="col-start-2 col-span-2">
        <h3 class="text-4xl pb-3">Text 1</h3>
        <p class="text-2xl">Text 2</p>
    </div>
</div>

and this works, but it doesnt hide the div, as per specifictation this does not affect the layout rendering: https://developer.mozilla.org/docs/Web/CSS/visibility
What would be the correct way to accomplish this in Tailwind CSS? Of course, I could add custom css to hide it on the small breakpoint, but I think this would not be the propper way to deal with this issue.

Upvotes: 1

Views: 4041

Answers (1)

JHeth
JHeth

Reputation: 8366

In your second example you're overwriting hidden with grid which is also a display utility. Your code should be:

<!-- remove grid after mx-auto -->
<div class="hidden md:block max-w-7xl mx-auto sm:grid-cols-1 md:grid-cols-3 pt-6 gap-8">
    <div class="col-start-2 col-span-2">
        <h3 class="text-4xl pb-3">Text 1</h3>
        <p class="text-2xl">Text 2</p>
    </div>
</div>

If you were using an IDE or editor with Tailwind support you would get a warning when you have two classes that do the same thing. Personally I use VS Code with Tailwind CSS Intellisense, but there are plenty of other options, they will help you prevent small mistakes like this.

Upvotes: 1

Related Questions