Responsive Web Design: Target iPad Device

[toad78]

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?

[ralph.m]

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.

[toad78]

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?

@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;
}
}

[ralph.m]

Rather than this:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

}

try this instead

@media only screen and (min-width: 768px) and (max-width: 1024px) {

}

and add this to the head of your document:

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

[toad78]

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;

}

[ralph.m]

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.