Parts of website not displaying when published

Hiii!! So my website looks just fine on the design preview:

But when I publish the site, I only get a partial display. I can’t preview the nav/footer/secondary nav and other elements thats are on the website. Please HELP!!

https://dmi-abogados.webflow.io/post/poder-ejecutivo-secretaria-de-hacienda-y-credito-publico
(This is what the published version looks like)

Hi @anapaugz welcome to the community! I’m so glad that you’re here!

Could you please update your post with some more information so we can help you faster? Things like your read-only link & screenshots to compare really helps us to help you faster :slight_smile:

How to share a read-only link:

Thanks in advance!

Hi Waldo, here’s the read only link:

https://preview.webflow.com/preview/dmi-abogados?utm_medium=preview_link&utm_source=designer&utm_content=dmi-abogados&preview=e1f9828824e06213f4dafbc2525668d3&pageId=60abdc5f8f39be3862efb7ff&itemId=60de0447d4281751c537d443&workflow=preview

As additional information, I got the NAV to show on the published version. As you can compare from the posted screenshot the nav on the right with info about the author is missing on the published version. Also, there’s a section under the blog post missing which should be related posts. And the footer at the bottom.

Thanks for the quick reply, I really appreciate your help!!

Thank you so much for following up, @anapaugz :smile:

I found the solution :tada:

Within that blog post collection page, there’s an Iframe for the PDFs which are referenced. There’s a missing closing tag which is causing the behavior where it renders as expected in the Designer, but when out on the web the missing closing tag is causing unexpected behavior.

Shared with Zight

If you’re ever experiencing a difference between what’s showing up in the Designer compared to the published site, there’s a high likelihood that there may be a missing closing tag in custom code somewhere or some custom code causing different rendering.

Steps to resolve this issue:

  1. Open the embed code element
  2. Add in </iframe> to the end of the custom code snippet to close the Iframe
  3. Publish :smile:

I hope that this helps! Great work and happy designing! :webflow_heart:

Thank you so much!!!

1 Like

Hi Waldo, I have anther question regarding the iframe. On web everything works perfectly but on the mobile version of the site, I lose all of the iframe’s functionality. I can’t even scroll from one page to another and the width of the PDF file looks twice as big as the screen size on my phone. How can I create a responsive version of the PDF? Or should I create a link to download the PDF rather than viewing it on the website?

Look at the published version on your phone: https://dmi-abogados.webflow.io/post/poder-ejecutivo-secretaria-de-hacienda-y-credito-publico

Read only link: https://preview.webflow.com/preview/dmi-abogados?utm_medium=preview_link&utm_source=designer&utm_content=dmi-abogados&preview=e1f9828824e06213f4dafbc2525668d3&pageId=60abdc5f8f39be3862efb7ff&itemId=60de13c8228d443aae5d6746&workflow=preview

Great question, @anapaugz regarding iframes on mobile. Iframes typically have limited functionality, especially on mobile devices if navigation is available in the iframe. So I would recommend switching to a PDF Download link so that the native browser can load up the PDF instead of doing so inside of an iframe.