body class mt-number is the same as Tailwinds

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 3 months, 1 week ago.

Author Posts

adkoen

Hi Sebastian,

I just noticed that Microthemer adds a mt-{{page_id}} class to the body element. When using Tailwind CSS, this is the same as theirs mt-14 for instance, which effectivily adds a margin-top of 56 pixels to the body.

https://tailwindcss.com/docs/margin

I was able to circumvent this by duplicating the pages that had problems so they ended up with another id. But I thought you might wanna know.

And now that I think about it, it’s even easier to fix with some custom CSS in Microthemer 😅

best,
Koen.


Sebastian

Hey Koen,

Thanks for bringing this to my attention. How annoying! One way around this would be to set the body margin-top property to zero using the following selector:

body[class*="mt-"] {
  margin-top: 0px;
}

The above selector would override the .mt-14 tailwind class by having slightly higher CSS specificity.

If that isn’t workable for some reason, MT would need to make the format of the page-id class configurable.

Cheers,
Sebastian


adkoen

I’m good. I added the necessary CSS in the end so there’s actually no problem. And it only will be a problem if the page has an id of 96 or less. But, I took me a bit before I figured it out what was happening 🙂
Best,
Koen.


Sebastian

Oh great, I’m glad you’ve found an acceptable workaround 🙂

You must login or register to reply to this topic.