Streaming live at 10am (PST)

Elements on published site differ from editor preview


#1

I have two sets of elements that display differently once published.

Timeline Elements
- In Webflow: http://d.pr/i/16LBG/iry0XtHM
- Published: http://d.pr/i/19Z4I/2zTjnymX

Tab Buttons (notice spacing between buttons)
- In Webflow: http://d.pr/i/1f75p/2U2oh8RP
- Published: http://d.pr/i/V5LS/yHtEwb41

Browser
Chrome (46)

Read-only Link
https://preview.webflow.com/preview/issues123?preview=018d8cab8dcf6ba0db560c7dd5d9f5d2

Thanks in advance for your help.


#2

can you provide the published link? We can take a look at the code.


#3

Here you go: http://issues123.webflow.io/

Thanks


#4

Hi @speck,

As a suggestion, I would give the base class for those tab links, a width of 33.333% with the first two tab links having float set to left and third tab link set to float off. This will cause the tab links to be edge to edge with no gaps.

At the base tab link class, set the text to center typography to center the tab labels.

If you want to center and make the tabs menu a smaller width, you can do that by selecting the Tabs Menu and give a class width of 60% (or some other value). To center the menu, set the left and right margin to auto.

If it helps, I made a quick video to give you some ideas:

I hope this helps.


#5

Thanks Dave. Very helpful. Curious why those changes are needed when they seem to load right without them in the preview? Seems the ideal setup would be that the preview and published site look the same without special changes.

Do you mind looking into the timeline issue?

Thanks so much!


#6

Ping. Thanks in advance for your help.


#7

Hi @speck, those changes are not needed if you want to use an auto width and do not care about the gaps. The auto width on the links combined do not equal the width of the tab menu, so that is what causes the whitespace. The white space is sometimes hard to view in the designer, it really depends on the design.


#8

Thanks Dave. What's weird is that it worked fine at one time.


#9

Hi @speck, that is odd, the only thing I can say without being able to see the previous state to compare, is that maybe since they elements were using auto width, something else on the page layout changed (some other element) and had affect.

If that happens again, let me know and I am happy to check it :smile:

I am still taking a look at the Timeline layout issue, and will get back as soon as possible for that :smile:


#10

Thanks for looking into it Dave.


#11

Hey Dave. Just checking in to see if you found anything on the timeline issue. We're close to launching, so I may just dive in again to see what I can find.


#12

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