Skip to main content

Forums

This topic contains 5 replies, has 0 voices, and was last updated by  realph 6 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #37215

    realph
    Participant

    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.

    #99362

    realph
    Participant

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

    #99366

    Senff
    Participant

    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.

    #99372

    realph
    Participant

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

    #119426

    suganya
    Member

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

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star