@media only

HTML & CSS
1

Hey folks,

Im trying to design an ipad friendly website and im almost done with the homepage. In the head of the homepage, I have this meta tag:

<meta name="viewport" content="width=device-width; maximum-scale=1"/>

in the css I have:

@media only screen and (orientation:landscape){

Now, the thing that escapes me is, I have everything zeroed out i.e


html, body {
	background: #e8e2d9;
	margin: 0;
	padding: 0;
	color: #000;
}

If I take that above line of code out “@media” the page fits to screen with no outside border. It is only happening at the left side and the top maybe about 10px when I have this line of code put in. Any help is greatly appreciated.:rolleyes:

2

Found the solution.

Instead of including the @media in the actual css document, include it in the link tag at the top. Got rid of the margin.

Like this:


<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait-style.css” />

<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape-style.css” />
3

Glad you sorted it :slight_smile: