HTML embed content is off centre

RapidWeaver Classic General
1

I’m trying to embed a container from zoom SDK - this code works and is centred if I paste the code into a HTML page with no theme applied, If I apply the theme it shifts to the right.

Also tried using a stacks page using the html stack (my preferred method to embed).
But same thing happens - the embedded container is off centre to the right.

Can anyone suggest whats going on? - driving me mad!!!
PS - I didn’t generate the code for the zoom SDK - client had a developer do this.
Thanks

2

It sounds like the theme’s styling is affecting the HTML layout of the embedded content. Can you post a link to a live webpage with the issue? The only way for anyone to help is to see what’s happening. The easiest way for us to do that is to inspect the code of a page with the issue.

3

Hi - sorry, forgot to do that!!

4

https://www.pkw.clientportal.info/

The centre issue was fixed by the developer who build the container code for zoom, but now I can’t see the bottom of the page or scroll and the developer is says it’s not his code… Ahhhh

5

The problem is being caused by the Inline CSS styling from the code you are using. Not sure where all this coding came from, I hope it’s not part of the Zoom SDK.

First off, you have a bunch of stuff that belongs in the head section of the page you have in the body.

  1. Remove the meta tags and title (they already exist on the page).
  2. Take everything remaining above the comment !-- Zoom Container Starts --> and place that in the head section of the page.
    2020-12-05_10-31-38
    2020-12-05_10-31-38729×282 62 KB

2020-12-05_10-37-52
That should make things a bit cleaner.

Now Onto the problem. They set this code up to take the entire screen. They have the division set with inline CSS with !important attribute set on everything(poor technique) like this:

<div id="zoomContainer" style="width:100vw !important; height:100vh !important;display:flex !important;align-items:center !important;justify-content:center !important;">

It’s using 100vw and 100vh. That’s 100 percent of the entire view-port. No room for anything else. When you add the theme styling or pretty much anything else, it’s going to have problems.

As for the centering, I’d change at least the Width from width:100vw !important; to width: auto;.

I’d also remove all those !important attributes, it makes overriding the CSS impossible. The highest CSS Specificity you can have is an inline CSS so having !important is redundant

1 Like
6

Brilliant thank you

8

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