I'm beginner at HTML and CSS and am trying to launch a simple website with an iframe from a third-party website and embedded Twitter timeline widget.

1920x1080 version looks all good, but when I use media queries to make it responsive, the Twitter timeline widget overflows on the footer or any other element that I put below it in html. Even more, it's not overflowing, it's more that the timeline starts appearing right when the footer or any other element does.

Pertinent HTML and CSS as well as a screenshot below. Thanks a lot everyone!

HTML

    <main>    
    <h1>ESTADO DE RED DE SUBTE</h1>
    <div >
      <div >
        <iframe  height="600" src="https://aplicacioneswp.metrovias.com.ar/estadolineas/desktop.html"></iframe>
      </div>
      <div >
        <a  data-lang="es" data-width="280" data-height="500" href="https://twitter.com/basubte?ref_src=twsrc^tfw">Tweets by basubte</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </div>
    </div>  
  <footer>
    <p >transporte.capital, 2022</p>
  </footer>
  </main>

CSS

    .subte-div {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  height: 600px;
}

.frame {
  border-width: 0px;
  border-style: solid;
  width: 350px;
  padding: 0;
  margin-right: 50px;
  display: flex;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background-color: rgb(208, 206, 206);
}

.footer-text {
  font-size: 10px;
  font-weight: 700;
  padding: 0;
  color: rgb(57, 57, 57);
}

@media (max-width: 700px) {

  header {
    flex-direction: column;
    padding: 0;
  }

  .menu {
    display: flex;
    margin: 0;
    justify-content: space-around;
    width: 90%;
    gap: 5%;
    padding-bottom: 1em;
  }

  .subte-div{
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  
  .tabla, .tweets {
    margin: 0px;
    padding: 0px;
  }

  .footer-text {
    display: none;
  }

  .h1 {
    margin-bottom: 0px;
    padding-bottom: 0;
  }

}

CodePudding user response：

Your issue is with the following:

• You have .subte-div set to 600px of height in your css.
• Your iframe occupies that 600px with height="600"
• Your tweets div is inside the .subtle-div and has data-height="500"

All these things can cause overflow issues because you have the .subte-div set to 600px of height. And both your iframe and tweets divs are inside of it and occupy a height of that 600px 500px = 1100px of height which causes an overflow..

I would suggest trying to take out the tweets div out of the .subte-div and try your best to avoid px values to set heights/widths as it is considered a bad practice and can cause responsiveness issues as well as in your case.. overflow.