body class mt-number is the same as Tailwinds

Author Posts

adkoen January 5, 2021 at 7:05 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

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 January 6, 2021 at 1:10 pm

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 January 6, 2021 at 2:24 pm

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 January 7, 2021 at 11:06 am

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

Sebastian November 23, 2021 at 12:45 pm

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 November 24, 2021 at 4:56 pm

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 November 24, 2021 at 4:57 pm

Ah thanks Koen, I really appreciate that!

You must login or register to reply to this topic.