CODEWITHSUNDEEP
javascripthtmlcssw3-css
Logan
Logan

Reputation: 39

Iframe doesn't respond correctly to width

I didn't have the best title here but here we go. So i am making a music website and i am trying to embed another page in my website into this website but i have nav bar.

I tried adding a bunch of different things in the css to make it not be so broken, if anyone has a fix or any way to make my question actually make sense feel free to edit or use the answer button. Thank you.

Sorry if it is confusing but, here is my code:

body {
  margin: 0;
  padding: 0;
  background-color: #181414;
  color: white;
}

.embed {
  margin-left: 25%;
  border: 0px #ffffff none;
  height: 100%;
  width: 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #3f3c3c;
  color: white;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #181414;
  color: white;
}
<ul>
  <li>
    <div class="Logo" onclick="location.href = 'https://www.ltunes.gq/'" ;><img src="https://ltunes.gq/assets/Logo.png" width="50" height="50">LTunes</div>
  </li>
  <li><a href="/">Home</a></li>
  <li><a href="music">Music</a></li>
  <li><a class="active" href="radio">Radio</a></li>
  <li><a href="podcasts">Podcasts</a></li>
  <li><a href="lyrics">Lyric Search</a></li>
  <li><a href="jukebox">Jukebox</a></li>
  <li><a href="download">Download App</a></li>
</ul>
<div class="embed">
  <iframe class="embed" src="https://ltunes.gq/radio" name="Music" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe>
</div>


<script async src="https://arc.io/widget.min.js#eMnAzx6E"></script>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">

Upvotes: -1

Views: 81

Answers (2)

Logan
Logan

Reputation: 39

Here is what i used to make it work:

     iframe {
  height: 100vh;  
  marginTop: 90px;
  overflow: hidden;
  width: 75%;
  margin-left:25%;
  border:0px #ffffff none; 
}

Upvotes: 1

Yahli Gitzi
Yahli Gitzi

Reputation: 445

Onced faced the same issue, styled the iframe like so:

iframe {
  height: calc(91vh - 90px), // 90px - height of the containing app header
  marginTop: 90px, // 90px - height of the containing app header
  overflow: hidden,
  width: 100%,
}

Don't know if it would work but might worth giving it a shot

Upvotes: 0

Related Questions