Difference between Toggle Preview and Read-Only link Preview

I added some embedded HTML for a rotating Hero Heading on Desktop and Tablet and set display to none for mobile. Likewise I have a static heading on mobile which is set to display: none on Desktop and Tablet. However, the heading from mobile still shows up on Desktop and tablet when I toggle preview but when I open the read-only link preview, it works fine. Which of these is correct?

Link below:
https://preview.webflow.com/preview/showpass?utm_medium=preview_link&utm_source=designer&utm_content=showpass&preview=7e9274375003cfbb60a2b56c53aae1fb&pageId=5d1bce664f7116da5510bd5d&mode=preview

Thanks,
Mir

Publish is always right.

Reading your message it seems you added the code (CSS, not HTML, right?) at page or site level, not by using an Embed component.

Code added at page or site level, in the head or /body boxes, only run/show on publish.

If you use an Embed component, you’ll see the effects of the code, HTML or CSS (not JS) right in the designer.

I just published. The heading that I set to display:none on Desktop and Tablet are still showing up. Do you have any idea why?

Interaction → is setting style="opacity: 1; display: block; transition: opacity 500ms ease 0s;"

<h2 data-ix="fade-in-on-load-2" class="hero-main-title subtitle" style="opacity: 1; display: block; transition: opacity 500ms ease 0s;">Showpass is the online ticketing software that puts you and your fans first. We love events and live to bring you the best technology to create amazing experiences for your ticket buyers.</h2>

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