Hello,
I discovered that the layout design within an iFrame for #lightbox is missing a parent container. This causes a overflow within the view port of the iFrame – causing bad user experience by forcing the user to scroll up/down to get to the Lightbox controls. i.e. smaller the devices' viewport, the worse this becomes. (Major deal-breaker if its not fixed)
To correct, wrap the current div, id=lightbox in your layout, with a container ID'd like, id=lightbox-container and use the following CSS:
#lightbox-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: normal;
}
#lightbox {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
}
Your front-end devs should be able to fix this in a sec.
—
Also, CSS in emails is seriously broke – esp. in mobile devises (where 87% of users view their emails). Is there a place that we can add our own CSS?
—
I thank you in advance and have a great day
~j
I am not 100% sure if I understand the problem.
Our lightbox is build to get the size of the complete screen / window. When embedding the screen / window is the iframe size. If the height of the iFrame is greater than the user's screen, the lightbox is displayed at the height of the iFrame. Is this the problem?
We cannot access the user's viewport within an iframe on another domain due to security restrictions imposed by modern web browsers. This security mechanism, known as the Same-Origin Policy, prevents scripts running in an iframe from accessing or manipulating the contents of the parent document or any other documents from different domains. Our iFrameResize script workarounds this problem and resizes the window to the needed height. When using our iFrameResize script you should enable the option disable_remote_overlay by appending &embed_options[disable_remote_overlay]=1.
When embedding with an fixed height, you need to choose a height or script something which resizes the iFrame to a size useful to your users device. My favorite way to embed a PollUnit is with an iframe with an height of 100vh and a width of 100vw. This way iframe size is the same than the screen / window. If this solutions is good for depends on your page.
We are testing our emails in various major email clients. Could you share a screenshot with support@pollunit.com with an description of your setup (browser, email client, version). We do not have an custom CSS feature for emails. This would be really challenging because of inline CSS requirements and inconsistent HTML and CSS support of email clients, some of them are also changing markup. I can put it to the feature request list, but I do not think this feature has good chances to get implemented.
