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 Hannah Mackaness
Hannah Mackaness
4,437 Points

I made a website..but can't center the div/iframe in mobile view..a bit stuck

I site I made is up at http://elaracaluna.net/

it looks fine on a laptop - but it doesn't center on a mobile phone..why not? I looked at it with the dev tools and even if I state html {width:100%;} I still get the same result. I works fine if the phone is landscape...but not horizontal..

What have I done wrong?

Big thank you :)

Jacob Mishkin
Jacob Mishkin
23,118 Points

I take it you mean portrait "vertical" is working and not landscape "horizontal". did you write any media queries for landscape mode?

Hannah Mackaness
Hannah Mackaness
4,437 Points

Hi Jacob, Thanks. I did make a mistake when I was describing but that's what I meant - landscape is fine but portrait looks horrible. If I write a media query should I target the iframe's div?

I embedded the iframe from vimeo and it looks like the height and width are set in the html. Should I try to move it into css and then target the iframe's height and width?

If I delete the height and width entirely it looks great on a phone. I basically want to write

if (device width>laptop width) { delete iframe height&&width specifications entirely }

but..in css

Jacob Mishkin
Jacob Mishkin
23,118 Points

Okay cool, Yeah, styles really should never be written inline with the HTML. I would say create a class for the iframe and work from there. Also margin 0, auto and text-align center should center the div. I looked at your meta tags, they look good, but double check just incase to see if the meta tag is creating with width ratio for mobile correctly.

Jacob Mishkin
Jacob Mishkin
23,118 Points

"if (device width > laptop width) { delete iframe height&&width specifications entirely }"

do you mean device width < laptop width? for device width less than the device width of the laptop?

you can totally write this in vanilla CSS.

if === Media query so:

@media (max-width: 687px ) {
this media query is saying, if the width is 587px or less do something here:

"delete iframe height&&width specifications entirely"

overwrite the CSS here.  

}

let me know what you come up with, I hope this helps, if not, let's try something else.

Hannah Mackaness
Hannah Mackaness
4,437 Points

thank you thank you

@media only screen (max-width: 360px){
  iframe {
  text-align:center;
  margin: 0 auto;
  max-width: 310px;

  }

}

I think this is working..but I will upload and check on an actual phone just to double check!

Hannah Mackaness
Hannah Mackaness
4,437 Points

it livesss! I had a look on a couple of real phones and it works! thank you so much for your help :)

Would you mind please double checking to see if it's okay? I don't want it to be a glitch - I still need to add a few things and I'm worried I might do something weird like push it around...

Jacob Mishkin
Jacob Mishkin
23,118 Points

sure! can you do me a favor and post your websites link as a comment, that way I can view it easier on my phone.

Hannah Mackaness
Hannah Mackaness
4,437 Points

elaracaluna.net :)

Jacob Mishkin
Jacob Mishkin
23,118 Points

It looks great! The only thing I see is there maybe a 3-5px margin-right thing going on, but it looks good. What do you think?

Jacob Mishkin
Jacob Mishkin
23,118 Points

Not a problem, I'm glad it works, Awesome!!

4 Answers

sizwengubane
sizwengubane
15,244 Points
sizwengubane
sizwengubane
15,244 Points

Select the div and give it the below properties <blockquotes>

margin: 0 auto;
text-align: center;

</blockquotes> this should do the trick..if it doesnt work..please tell me

Hannah Mackaness
Hannah Mackaness
4,437 Points

Heya,

Thanks for your input but it didn't work.Why did you use text-align? I thought that was only used if there was text inside the div?

Thanks, Hannah

sizwengubane
sizwengubane
15,244 Points
sizwengubane
sizwengubane
15,244 Points

ill tell you, but first try this block of code on ur div <blockquotes>

position: absolute;
margin: 0 auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 800px;
height: 600px;

</blockquotes> tell me if this works

Hannah Mackaness
Hannah Mackaness
4,437 Points
Hannah Mackaness
Hannah Mackaness
4,437 Points

Unfortunately that code breaks the layout completely

sizwengubane
sizwengubane
15,244 Points

yes, sometimes the same code doesnt work always...its based on how YOU designed ur website :) so cheers...keep improving

sizwengubane
sizwengubane
15,244 Points
sizwengubane
sizwengubane
15,244 Points

Ok listen up :) i used 'text-align: center;' because sometimes ur text might overlap ur div container thats why i centered it to see if anything changes When centering a div u must think of 2 things

  1. Specify a width for your div example = width: 700px;
  2. Set both its left and right margins to auto example = margin: 0 auto; <p>When both left and right margins are set to auto, web browsers are tempted to give the div an equal width on both sides. This is why you have to specift the width also, because if you dont set the width of your div..the browser will allow the div to take up 100% of the horizonal space</p> hope this helped....