Published CMS page doesn't look like my preview?

https://preview.webflow.com/preview/megasteel?preview=90e1cde4bd5b3bbed6a63d4765b6cfaf

I am trying to teach myself about Webflows CMS. If you look at the ‘News & Blog’ page, it looks like the design when I preview but is nor correct when published, can anyone spot what I have done wrong please? Thanks.

Hi I’m looking at your site right now, I spotted what is wrong in the design, let me a few mn and I’m back.

So, everything seems ok but the part in red right?

http://vincent.polenordstudio.fr/snap/v7e3m.jpg

There are empty elements in your design, and when you leave empty elements in your design, you’ll get differences between what you see in the designer and what you get online.

Why? Because to facilitate your work, Webflow is giving empty elements some specific, temporary style, that appear both in the designer and preview. In other words, an empty, unstyled DIV on a site is normally invisible and has no dimensions, but in the Webflow designer, it has a minimum size and a specific border.

Elements with the double border (4px gray border + dashed border) are empty divs, containers, row or sections etc.

http://vincent.polenordstudio.fr/snap/oh1ki.jpg

So it looks like the buttons is inside the div, but it’s not.

http://vincent.polenordstudio.fr/snap/2wx2m.jpg

And if I remove thet empty div, I get exactly what you get when you’re publishing your code:

So you have to delete those divs or give them a class name and some properties. I don’t give you more advices because I don’t know if you made a mistake or not. Feel free to tell us what you want to achieve exactly and we can tell you one of the best way to achieve it.

But here is my take on achieving the same visual result as you did, but with a simpler approach: (screencast video)

https://v.usetapes.com/KfwuVIQILe

3 Likes

@vincent - That is brilliant - and so detailed - thank you very very much. I will make the required changes :smile: Have a great day.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.