Center iFrame in Widget Area

[kcreative]

Hi guys, tried to center an iFrame used to pull a Facebook page, but it doesn’t seem to be working. Checked those threads:

Cannot center facebook feed iframe in content area within row

Centering iframe

CSS

width: auto;
max-width: 350px;
margin: 0 auto;
}```

iFrame
```<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FTravelCrestedButte&tabs&width=280&height=214&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="280" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>```

<img src="//tco-forum-uploads.s3.amazonaws.com/original/3X/5/c/5c13afef91eb972d072e5e9c9775fc506c885cf7.png" width="506" height="355">

1) How could I achieve that? 
2) Is it possible to add padding in mobile view between the 2nd and the 3rd widget? Right now they looked "glued" together...

Thank you,
Petar

[Prasant]

Hello @kcreative,

Thanks for asking.

Please change the code with following:

<div class="fb-widget-center"><iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FTravelCrestedButte&tabs&width=280&height=214&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="280" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

</div>

After that add following CSS under X > Theme Options > CSS:

.fb-widget-center {
    display: grid;
    justify-content: center;
}

You can change the class name as per requirement.

If you would like to learn CSS, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

You can also use dev tools to speed up the development process.

https://www.youtube.com/watch?v=wcFnnxfA70g

Thanks.

[kcreative]

Thank you, appreciate your help!

[friech]

We are delighted to assist you with this.

Cheers!