Help with Responsive pages !!

Get Started | Login

Discussion Forums > Introduce Yourself

Replies: 2 Views: 294

TechtagonDigital I hate code! Posts: 61 Reg: Aug 16, 2012 Bronx 2,610	confirm \| cancel 11/04/15 03:14 PM (8 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 Title Comments 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 Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	11/04/15 03:38 PM (8 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 Comments 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 Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	11/05/15 02:51 PM (8 years ago) That's some good stuff Alan...thanks! Mark Comments That's some good stuff Alan...thanks! Mark

Login + Screen Name Required to Post Login 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.