0

I have this page, it only has an image on it right now but since I'm pretty new to this I thought that would be enough. On a normal desktop screen, I want the image to be left-aligned. And that's how it is. But when it's in portrait mode, and the max-width is 480px, I want the image to be centered, horizontally.

My code is:

@media (max-width: 480px)
{
    img
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

Now, the above code works great on the computer. When my PC is in landscape mode and the max-width is greater than 480px, the image is left-aligned. And when I put my PC in Portrait and Shrink the browser window's width to less than 480px the image becomes centered.

But this does not work on my phone. My phone's width is 480px. Why isn't is working then? I don't understand.

spike.y
  • 389
  • 5
  • 17
  • Just a suggestion, but try with a max-width of 490 or 500. Browsers aren't pixel-precise. – Andy G May 19 '14 at 16:45
  • Thank you @AndyG I did try that before. I even tried making it 800 but no difference. I then tried 450 but that didn't work either. – spike.y May 19 '14 at 16:47

3 Answers3

2

This will help (it did for me) - http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html. Viewports, widths and device widths are confusing - with multipliers, and other things in place - this article seemed to explain them.

Danny Staple
  • 7,101
  • 4
  • 43
  • 56
  • thank you for your answer. This I thought had just solved my problem. But then I viewed the webpage on my _other_ phone (that phone's width is 1280px) and the image is still center aligned. But it shouldn't be cause the centering code for img is only inside the max-width: 480px rule :/ – spike.y May 19 '14 at 17:16
  • I think you need to post a bit more code, can we see the css for desktop? – lharby May 20 '14 at 08:38
1

What about putting 

text-align:center;

On the parent wrapper?

http://jsfiddle.net/lharby/6y4E4/

And combine that with setting max-widths in the media query?

lharby
  • 3,057
  • 5
  • 24
  • 56
0

Just a thought, try having the page detect the device that is being used and run different code for desktops and mobiles? not sure how it would work since I am fairly new to this myself, but I have seen others do it.

Sam Denton
  • 465
  • 3
  • 18