How to center IFrame embedding in portal page?

[poweruser132564]

I've embedded a canvas app into a portal using IFrame, but for some reason I cannot get the IFrame to be centered on the screen. The frame is shifted to the right, leaving a large gap on the left.

Has anyone had any luck centering an IFrame--removing the gap on the left side of the screen?

[ragavanrajan]

Hi @poweruser132564 , you can add your custom css to remove the padding / margin on the left of your iframe and make it center. 

To do this here are the steps: 

1. Edit the portal app 

2. Click on themes > Edit CSS > upload custom css > 

3. Then inspect the element and take the class and add the element in custom css and remove your left padding/ margin. 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[poweruser132564]

Thank you! I added the following, and was able to make the screen responsive in size, but it's still not centered. Not sure what I'm doing wrong!

CSS:

.container {

justify-content: space-evenly;

align-content: center;

text-align: center;

margin: auto;

margin-left: auto;

margin-right: auto;

}

HTML:

<div class="container"><iframe frameborder="0" src="https://apps.powerapps.com/play/f5aa049d-a5b6-4eda-a63d-b469b071dcfb?tenantId=6432b247-02c7-412e-b70..." allowfullscreen="true" style="display: block; width: 100%; height: 100%;"></iframe></div>

[ragavanrajan · Accepted solution]

Hi @poweruser132564 

I have done the test and all you need to center your iframe is using one column component. You dont need a custom css. Attaching the screenshot and code for your reference 

and the HTML 

<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; text-align: left; min-height: 100px; padding: 8px; margin: 0px;">
  <div class="container" style="display: flex; flex-wrap: wrap;">
    <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;"><iframe frameborder="0" src="https://apps.powerapps.com/play/e51b52sdffs-4173-b4e5-2aa62d56f871?tenantId=fasfsd3ec-9d6d-145e7e36a1a5&amp;source=portal&amp;" style="width: 100%; height: 600px; display: block;"></iframe></div>
  </div>
</div>

Hope it helps. Thanks 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[poweruser132564]

That works. Thank you!