CODEWITHSUNDEEP
htmlcss
George Batty
George Batty

Reputation: 115

Can't resize iFrame

The iFrame or wrapper div will not change size, whatever i try:

The Output: output

The HTML:

<html>
<head>
    <link rel="stylesheet" href="CV.css">
<title>
George's CV
</title>
</head>
<body>
    <div className="phone" style="height: 737px; width: 654px">
        <div className="container" style="height: 536px; width: 350px">
            <iframe src="http://foodsharing-production.herokuapp.com"></iframe>
        </div>
    </div>
</body>
</html>

The CSS:

.phone{
    margin:auto;
    height: 737px;
    width: 654px;
    background-image: url("/imgs/phone.png");
    position: fixed;
    top: 50%;
    left: 50%;
    display: block;
}
.container {
    position: fixed;
    left:0; right:0;
    top:0; bottom:0;
    margin: auto;
    height: 536px;
    width: 350px;
    border:1px solid #000000;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: block;
 }

feel like i might be missing something obvious, any help would be appreciated...

Upvotes: 0

Views: 6660

Answers (3)

VXp
VXp

Reputation: 12058

No need to have inline and external styles at the same time, just use one or the other, ideally external. You need to target the iframe element to affect it with your styles. I've also made it's width responsive with the max-width: 100% because I think it might come in handy:

.phone {
  margin:auto;
  height: 737px;
  width: 654px;
  background-image: url("/imgs/phone.png");
  position: fixed;
  top: 50%;
  left: 50%;
  display: block;
}

.container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 536px;
  width: 350px;
  border: 1px solid;
  border-radius: 5px;
  display: block;
}

iframe {
  width: 500px; /* adjust to your needs */
  max-width: 100%; /* to make it responsive */
}
<div className="phone">
  <div className="container">
    <iframe src="http://foodsharing-production.herokuapp.com"></iframe>
  </div>
</div>

Upvotes: 1

loliki
loliki

Reputation: 957

You should increase its size with CSS like that 

iframe {
  width:350px;
  height:536px;
}

Upvotes: 2

dom_ahdigital
dom_ahdigital

Reputation: 1681

Change the width on the iframe itself. E.g.

<div className="phone">
  <div className="container">
    <iframe width="600px" src="http://foodsharing-production.herokuapp.com"></iframe>
  </div>
</div>

You can also set this in the CSS:

iframe {
  width: 600px;
}

Upvotes: 2

Related Questions