How can I make an html page automatically fit mobile device screens?

Asked 25/9, 2015 at 12:40 Answered 25/9, 2015 at 12:46

Solved html forms iframe mobile formidable

I am putting a Formidable Form on an html page by using an <iframe>, but I'd like it to be full screen on a mobile device. So far I'm using the following code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style>
  @import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);

  body {
  background-color: #f3eedd;
  width: 750px;
  overflow:scroll;
    overflow-x:hidden;
  }

h2 {
    font-size: 20px;
    color: #c13e18;
    margin: 10px 30px 10px 30px;
}

</style>
</head>
<body>
<div id="header">
<h2>Book Supheroes Unite</h2>
</div>
<div id="form">
<iframe src="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=sbyrt02
" frameborder="0" scrolling="no" style="width:280px;height:535px;"></iframe></div>
</html>

I believe it has something to do with viewports? However, I'm not entirely sure on this!

Maurilla answered 25/9, 2015 at 12:40 Comment(7)

Let me know if the meta tag I provided solves your problem. – Reflexive 25/9, 2015 at 12:53

Hey @Reflexive the meta works, however I'm having a tough time with the iframe... That doesn't seem to want to auto scale to fit the device screen! – Maurilla 25/9, 2015 at 13:29

Hmmmm, take a look at this That seems to handle the new issue. – Reflexive 25/9, 2015 at 13:36

Essentially you have defined the width and height already. So, I'd be willing to bet that no matter what, your Iframe is 280px by 535px? – Reflexive 25/9, 2015 at 13:38

Thanks @Reflexive I'm not sure why but this doesn't seem to be 100% correct. Check it out challenge-the-box.com/wp-content/uploads/book-super.html if you get a spare minute. – Maurilla 25/9, 2015 at 14:50

Also this is what I'm trying to insert with the iframe challenge-the-box.com/wp-admin/… – Maurilla 25/9, 2015 at 14:51

Can you try it with no width or height attribute? I am playing with your code now. Give that a shot. – Reflexive 25/9, 2015 at 15:5

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This meta tag allows you to target mobile devices and sets the width to the screen size.

Documentation provided here!

Also consider migrating to bootstrap a CSS framework for Responsive web design! Twitter Bootstrap

Reflexive answered 25/9, 2015 at 12:46 Comment(0)

Personally I would use a library like bootstrap to acheive this adding something like this to your head.

<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap allows you to create dynamic grids with your content regardless of the device size. You simply create divs inside a larger container for example the fluid container:

<div class="container-fluid">
<div class="row">
    ...
  </div>
</div>

Trin answered 25/9, 2015 at 12:46 Comment(1)

Just note you do not need bootstrap to implement that meta tag. – Reflexive 25/9, 2015 at 12:49

-3

You can use the media queries ! looks like this:

@media (max-width: 640px) {
  //your css to make it full screen
}

Tachycardia answered 25/9, 2015 at 12:44 Comment(0)

Recommended topics

Hot tags