SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Responsive Web Design: Target iPad Device

    There's this site that I'm having trouble downsizing for iPad devices. On the Thrive, it works perfectly (landscape mode), but with the iPad, the backgrounds get cut off because of the width of the site.

    Am I better off creating a new stylesheet for iPad devices? Or is there a simpler method?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yes, you don't need a whole new style sheet for the iPad, but I'd suggest you first tighten up the desktop design a bit first, anyway. If you make the browser much narrower on the desktop, things start to move out of place, so I'd fix that first. You can easily target an iPad with a simple media query.

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, you don't need a whole new style sheet for the iPad, but I'd suggest you first tighten up the desktop design a bit first, anyway. If you make the browser much narrower on the desktop, things start to move out of place, so I'd fix that first. You can easily target an iPad with a simple media query.
    Yes, I've done that, but shouldn't I just be able to do this to modify the design for mobile devices?

    Code:
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #container, .wrapper, #header, .smalldown, #checker, #bottom {
    	width: 1024px;
    	margin-left: 0;
    	margin-right: 0;
    }
    #dg {
    	position: relative;
    	width: 1024px;
    	margin-left: auto;
    	margin-right: auto;
    }
    #container {
    	top: 0;
    }
    .moduletabletopmenu, .moduletablemainmenu {
    	width: auto;
    }
    #checker {
    	top: -126px;
    }
    .moduletablebannslide img {
    	width: 1024px!important;
    	height: auto;
    }
    .moduletablelogo {
    	width: 501px;
    }
    .moduletablelogo img {
    	width: 601px!important;
    	height:auto;
    }
    .moduletablemiddlebuttons img {
    	width: 200px;
    	height: auto;
    }
    #bottom {
    	padding: 0 20px 20px;
    }
    #bottom .moduletablebottommenu {
    	width: 490px;
    }
    #bottom .moduletablebottommenu div {
    	width: 100px;
    }
    #bottom .moduletablecard {
    	float: left;
    }
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Rather than this:

    Code:
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    
    }
    try this instead

    Code:
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    
    }
    and add this to the head of your document:

    Code:
    <meta name="viewport" content="width=device-width">

  5. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, that made a wonderful improvement except that my background images are not flowing 100% wide. The ones I'm referring to are:
    #topbkgrd {

    position: absolute;

    width: 100%;

    height: 172px;

    top: 0;

    background: url(../images/top-bkgrd.png) repeat-x 0 0;

    z-index: 3000;

    }

    and

    #checker {

    position:relative;

    width: 100%;

    top: -44px;

    background: url(../images/cont-checkbkgrd.jpg) repeat-x center center;

    z-index: 5000;

    }

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hm, dunno. All I can suggest is that the Send Feedback div is set to 1200px, so it might be forcing the other content to squeeze down a bit. Try adding a different width for that in the media query.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •