How to create breakpoint for height? e.g @media (max-height: 922px) #12788

nicitaacom · 2024-01-20T11:55:49Z

nicitaacom
Jan 20, 2024

I know that I can create `min-[1800px]:top-[34%]
hot to create for min height because example above work for width

I want if <953px height top-[34%]

Is it possible with tailwind?

Yep! You could use an arbitrary variant, [@media(max-height:953px)]:top-[34%] or you could have it as a screen value in your Tailwind configuration:

screens: {
  foo: {
    raw: '(max-height: 953px)'
  }
}

<div class="foo:top-[34%]">

See both examples in this Tailwind Play (open the Generated CSS panel).

wongjn · 2024-01-20T12:06:34Z

Yep! You could use an arbitrary variant, [@media(max-height:953px)]:top-[34%] or you could have it as a screen value in your Tailwind configuration:

screens: {
  foo: {
    raw: '(max-height: 953px)'
  }
}

<div class="foo:top-[34%]">

See both examples in this Tailwind Play (open the Generated CSS panel).

2 replies

Thank you!

Ask chatGPT
And provide more information that might help us to help you

nicitaacom · 2024-03-03T07:24:54Z

Also I can create something like this

[@media_((min-height:940px)_and_(min-width:1800px))]:top-[34%]

0 replies