Cannot center facebook feed iframe in content area within row

[Ben]

Here is the current page:

http://18.209.43.156/home2/

I’ve tried centering column content as well as adding auto margins.

[christian]

Hey @Ben,

iFrames are set to 100% width in the theme to make them responsive out of the box. Though they can be centered by setting the Column’s Formatting to Center, they won’t move to center because they span 100% of the column’s width so you need to override the iframe’s width inside the Content Area. To do that. add this code in your Content Area > Customize > Element CSS.

$el iframe {
  width: 500px;
}

You can watch the whole process in this screencast.

To know more what the Element CSS is, please see visit this link.

Also note that 500px is not a fixed value. I just chose that value to quickly show you the centering aspect and your iframe and Facebook App is already set to 500px. It’s not responsive so in mobile view, you might see a horizontal scrollbar. For that, you will need to consult with a third party developer to make your iframe and Facebook App responsive. Our goal here is just to show the theme’s involvement.

Hope that helps.

[Ben]

Unfortunately, that does not seem to have worked. It is still left-aligned. Is there something else interfering?

[ruenel]

Hello There,

Sorry if the code does not work. Please have it updated and use this instead:

$el {
  width: auto;
  max-width: 500px;
  margin: 0 auto;
}

You still need to add this code in your Content Area > Customize > Element CSS.

Please let us know if this works out for you.