In the designer I have 3 tabs, each using iframe embeds with PDFs in them. The first tab has 1, the second has 3, and the third has 1. The tabs are unclickable and the PDFs (beyond the first) are not displaying as intended.
The embed code I’m using is “< iframe src=“https://url/filename.pdf” width=“100%” height=“1100px” >” (no spaces at start/end) for each one. It works/looks fine in the designer, and perfectly in preview. It displays nothing on the staging site (see link) which is my issue.
So far I have tried:
-removing flex box elements and placing the entire thing (tabs/content) into multiple divs, with the parent using flex/not using flex properties
-changing the tab menus/content from static to relative and adding a z-index of 1 for each
-Shift+Refreshing the designer
-Clearing my browser’s cache
-Trying multiple browsers (safari + chrome)
Originally it was just the tabs element within a div within a section, so I removed the section initially. What caused the functionality to return in preview was the static>relative + z-index adjustment, however nothing has helped it in staging since. My only guess is that perhaps it has to do with multiple embeds not loading because of the initial embed (when anything has worked on the staging site, it was only the first tab/PDF), however I am not adept at html or CSS so I’m not sure how to approach/customise the solutions I’ve seen out there.
Any help would be appreciated. I’m a relative beginner from a mostly graphic design background with wordpress experience, I’m willing to screenshare if someone is willing to go through it with me as well. Thanks for reading and thank-you for your time.
Here is my site Read-Only: (Reports)