Grow your CSS skills. Land your dream job.

Background Width Weird on iPad

  • # March 18, 2012 at 2:52 pm

    I’m having a problem with a site I’m doing, and for some reason the background doesn’t span the entire width of the page on the iPad. I’ve tried adding min-width: 1024px; to my body tag to no avail. Anyone know what the problem might be?

    You can view the site here.

    Thanks in advance.

    # March 18, 2012 at 3:44 pm

    Add this to the head section of your page

    Very nice site BTW

    # March 18, 2012 at 3:54 pm

    That doesn’t seem to fix it. I appreciate the help though. Thanks for the kind words also.

    # March 18, 2012 at 4:18 pm

    EDIT: Make sure that the min-width of your header is the same size as the width of the widest element on your page (in this case, 1052px). Theory behind it is below, in case you’re interested:

    What you’re seeing on your iPad is actually a slightly zoomed in version of your site. If you look all the way down, you’ll see that the footer is flush with the edges of your page. However, his footer is actually 1052 pixels wide, so you’re actually seeing a 1052-wide site stretched/shrinked into a 1024 screen (so whatever the width of your screen is, it actually represents a 1052 pixels width).

    Essentially, your header is actually 1024 pixels wide. That’s how iPad defines “100%” since that’s the viewport of the site (the zoom factor is irrelevant). So, that’s the actual rendered width of your header.

    The rest of your site is wider — again, that’s the reason why iPad zooms out somewhat. And so that will make your header look a little smaller than that.

    You could either make sure that the initial zoom is 100%, but then the rest of the site will be a little too large for the iPad viewport and may be cut off. Or, I would suggest to make sure there are no elements that are 1052 wide. But you can also try to make the min-width of the header 1052 pixels instead of 1024.

    # March 18, 2012 at 6:01 pm

    @Senff You’re awesome! Thanks you so much for this. And thanks a heap for explaining why it does that. +1

    # December 30, 2012 at 3:00 pm

    @Senff Thank you so much. It helps me to solve the problem. Thank you once again.:)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".