How to adjust margin-top (mt-) based on screen height using HTML and Tailwind CSS?

Mark Gavagan 0
Viewed 31

I'm building a simple HTML/Tailwind CSS site.

Margin-top of "md:mt-52" (generally) works well on screens greater than 767px wide, such as an Nexus 10 tablet in portrait mode (viewport = 800px x 1280px). Please see the screenshot immediately below: Screenshot of Nexus 10 tablet

Margin-top of "mt-12" works well for displaying the first line of text where I want it on screens smaller than 640px wide, such as an iPhone 11 Pro in portrait mode (viewport = 375px x 812px). Please see the screenshot immediately below: Screenshot of iPhone 11 Pro in portrait mode

Problem: When the above iPhone 11 Pro it rotated 90 degrees, to landscape mode, the viewport width becomes 812px, so the screen size becomes "md" and "md:mt-52" is applied, pushing the text below where it's visible. Please see the screenshot immediately below: Screenshot of iPhone 11 pro in landsacpe mode

In the case immediately above, when screen height is so much smaller, I'd want "mt-16" to apply. How can I do this with HTML and Tailwind CSS?

Thanks for any help!

media-queries responsive-design tailwind-css css html
1 Answers

You can define a custom breakpoint in the tailwind.config.

For example:

extend: {
  screens: {
    // ml stands for 'mobile landscape'
    ml: {
      raw: '(min-width: 480px) and (max-width: 960px) and (max-height: 480px)',
    },
  },

And then use that as you would with other breakpoints, like class="mt-12 ml:mt-16 md:mt-52"

Martin Diehl0
Related