Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Daniel Beale
Daniel Beale
1,681 Points

Facebook feed not centering on mobile

Can anyone tell me what i'm doing wrong? I just can't get the Facebook feed on this page - http://www.danielbeale.co.uk/donalberto/ to center on mobile. Can anyone help me with what i'm doing wrong?

Jeff Lemay
Jeff Lemay
14,268 Points

It's centered in my browser when I shrink to mobile sizes (Chrome).

Mat Sanders
Mat Sanders
4,819 Points

It also works on my desktop but not on my safari on my iPhone. Also don't see anywhere where you tell it to be centered. So I'm guessing that's part of the facebook api. Which might be wonky.

Daniel Beale
Daniel Beale
1,681 Points

Yeah, I get it centering in my desktop browser when shrunk down too. Just not on Chrome mobile.

Jeff Lemay
Jeff Lemay
14,268 Points

Do you have an old stylesheet cached on your phone?

EDIT: nvm, not centered on my mobile

2 Answers

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Potential Fix - update this in your css:

.fb_iframe_widget span {
  display: block;
  /* position: relative; */
  /* text-align: justify; */
  margin: auto;
}
.fb_iframe_widget iframe {
  /* position: absolute; */
}
Daniel Beale
Daniel Beale
1,681 Points

Thanks Jeff - I'll try this when I get home tonight.

Daniel Beale
Daniel Beale
1,681 Points

Ah! Nope! It doesn't work. The odd thing is that whatever styling I apply to it doesn't seem to work on mobile - for instance if I put left margin on it as a dirty workaround to move it right it works when I shrink desktop Chrome down to mobile size, but as soon as I view on an actual mobile it's back to being stuck to the left side of the page ;/

Daniel Beale
Daniel Beale
1,681 Points
Daniel Beale
Daniel Beale
1,681 Points

It's only a half answer, but everything else has failed...

The previous answer made padding work, so I've put in a load of media queries to change the left padding depending on the screen size so that its centred on common screen sizes. It'll still look wonky on a screen that I haven't accounted for though :/

Jeff Lemay
Jeff Lemay
14,268 Points

This should be all you need to center an iframe on the page:

iframe {
    display:block;
    margin:auto;
}

Good luck to you.