Button looks different published than it does in preview?

[Sneaky_Coyote (Bailey Fisher)]

Hi All,

I made a fancy little button, however it’s spacing and alignment is really off in the published version of the site, whereas in preview and while editing, its perfect.

Any ideas?

---

Read Only Link: https://preview.webflow.com/preview/advinor-cpa?utm_medium=preview_link&utm_source=designer&utm_content=advinor-cpa&preview=39cb762ec80b9e03dbce8143983a9f54&mode=preview

Published Link: http://advinor-cpa.webflow.io/

[shokoaviv (Moshe Assulin)]

Hi

Where is that button? page? section? give us A clue

[Sneaky_Coyote (Bailey Fisher)]

Hey @shokoaviv,

The button is the first centered call to action on the page. I’ve attached a screenshot below.

[shokoaviv (Moshe Assulin)]

Hi

Since I can not publish the read only link I don’t I’ll never know if My work around fixed the problem, anyway on preview mode it looks good - I suggest you to get rid of the column element, unless you need to show lots of of text. Instead of column you can use Div with display: flex, I can’t see how form element can leave peacefully inside A column element. Try to clean all padding and margin around the form block and the button.

[Sneaky_Coyote (Bailey Fisher)]

Thanks for that @shokoaviv!

The solution was to remove the column, then use two div’s. One for containing everything, and the other to contain the text and the form.

For the button, I just set the form block to relative, and the CTA button to absoloute. Then I played with the spacing and now we’re all good to go!