Button looks different published than it does in preview?

Design help General
1

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/

2

Hi

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

3

Hey @shokoaviv,

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

Screen Shot 2019-12-08 at 12.03.45 AM
Screen Shot 2019-12-08 at 12.03.45 AM2450×698 216 KB

4

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.

5

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!