body class mt-number is the same as Tailwinds

This topic contains 6 replies, has 2 voices, and was last updated by  Sebastian 10 months, 2 weeks 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 🙂


Sebastian

UPDATE – version 7 fixes this by using mtp-123 for page classes. You can manually change this via the preferences when upgrading from version 6, as it won’t change automatically (to ensure existing selectors work as usual).

If changing the class prefix from “mt-” to “mtp-” Just bear in mind that you will need to manually update all of your selectors. The folder search feature will help with this. There is no replace feature as of yet, but this will come in time.

Thanks,
Sebastian


adkoen

Thanks Sebastian for getting back to me on this and for your software that keeps on rocking. Whenever I have the chance I try to be an ambassador for Microthemer.
best.


Sebastian

Ah thanks Koen, I really appreciate that!

You must login or register to reply to this topic.