I am using the Wizardry method, with the plugin, and everything is working correctly except when it comes to converting PX to EM on margins or paddings.
My understanding is, with everything properly setup, I should be able to switch from 96px to 6em on a bottom margin, and there should not be any significant change. However I am getting an almost 400px bottom margin using 6em, when i should be getting roughly 96px.
You’ll see in the video, this is even the case with no parent elements.
Also my wizardry plugin is SETSIZE to 1440, my webflow canvas is 1440, the browser window of my published site is 1440, and the code i copies from the wizardry calculator and embedded is 1440.
EM is relative to the font-size of the element (2em means 2 times the size of the current font). In your case, the font size of H1 is 38px and the padding bottom is 6em. If we multiply this we get 228px which is exactly the amount of padding you see in the green block.
I’m guessing you’re looking for a way to structure your Webflow projects. I’d personally recommend Finsweet client first instead of Wizardry, mainly because of the amount of documentation (just personal preference). Here is a link to the documentation if you’re interested!
Wow, thank you so much RoryVB. Understanding that particular calculation helps a lot. In Timothy Ricks’ video, it appears as though his method used on padding and margins converts pixels to the equivalent EM, so maybe this will help me figure that part out.
I’ll check out Finsweet. More documentation sounds GREAT!
I just looked at Finsweet. It looks good, but I really like the flexibility of being able to use whatever value you want without to much thought. I have Wizardry working perfectly with the one exception of the padding and margins.
