Discussion Forums  >  Introduce Yourself

Replies: 2    Views: 146

TechtagonDigital
I hate code!
Profile
Posts: 61
Reg: Aug 16, 2012
Bronx
2,610
11/04/15 03:14 PM (5 years ago)

Help with Responsive pages !!

I am working on a magazine app, that makes use of HTML files to display pages.
My current design works perfectly on the iPad, but the pages does not fit perfectly on the iPhone. I been trying to work out a media query to resize the page to fir the screen it's been displayed on. But no lock so far.
Can someone please give me pointers on how i can make this work.

My current HTML file for the pages looks like this :

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width/" >
<title></title>
<link href="css/book.css" rel="stylesheet" />
<style type="text/css">
#page {
background-image: url("images/image-001.jpg");
}
</style>
</head>
<body>
<div id="page">

</div>
</body>
</html>

And the current CSS file I'm using is as below:

body {
background-color: #333;
padding: 0px;
margin:0px;
font-family: Helvetica;
font-size: 14px;
line-height: 1.2;
}

#page {
height: 1024px;
width: 768px;
background-color: #FFF;
position: relative;
/* background-image: url("images/img001.png"); - Set in the page header */
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0px;
}

What do i need to do to make this display and fit on an iPhone ?

Thank you
 
AlanMac
Aspiring developer
Profile
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
37,120
like
11/04/15 03:38 PM (5 years ago)
What you need is conditional CSS based on media queries. This site looks it has all the iinformation you could need http://stephen.io/mediaqueries/#iPad

And here is a downloadable template http://xaviesteve.com/2899/ipad-iphone-mobile-html-css-template-for-web-apps/

Enjoy & good luck, Alan
 
GoNorthWest
buzztouch Evangelist
Profile
Posts: 8197
Reg: Jun 24, 2011
Oro Valley, AZ
1,000,000
like
11/05/15 02:51 PM (5 years ago)
That's some good stuff Alan...thanks!

Mark
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.