Discussion Forums  >  Introduce Yourself

Replies: 2    Views: 185

TechtagonDigital
I hate code!
Profile
Posts: 61
Reg: Aug 16, 2012
Bronx
2,610
Fourm Star
11/04/15 03:14 PM (6 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
Fourm StarFourm StarFourm Star
like
11/04/15 03:38 PM (6 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
Fourm StarFourm StarFourm Star
like
11/05/15 02:51 PM (6 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.