Discussion Forums  >  Introduce Yourself

Replies: 2    Views: 146

I hate code!
Posts: 61
Reg: Aug 16, 2012
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>
<meta name="viewport" content="width=device-width/" >
<link href="css/book.css" rel="stylesheet" />
<style type="text/css">
#page {
background-image: url("images/image-001.jpg");
<div id="page">


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

body {
background-color: #333;
padding: 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
Aspiring developer
Posts: 2612
Reg: Mar 05, 2012
Esher, UK
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
buzztouch Evangelist
Posts: 8197
Reg: Jun 24, 2011
Oro Valley, AZ
11/05/15 02:51 PM (5 years ago)
That's some good stuff Alan...thanks!


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.