html - superposición de secciones en modo móvil css

Soy nuevo en HTML y CSS y estoy intentando diseñar un sitio web a partir de algún código fuente que encontré.

Cuando abro la página en la web, se muestra lo siguiente:

Cuando abro esta página desde un dispositivo móvil aparece lo siguiente:

En un dispositivo móvil, la sección Descargar la aplicación se superpone a la imagen del teléfono que agregué.

¿Cómo puedo asegurarme de que toda la sección azul estará debajo de la imagen?

Las partes del .css que encontré relevantes son:

.home-image-right {
  display: block;
  position: absolute;
  right: 0;
  top: 55%;
  -webkit-transform: translateY(-68%);
  -ms-transform: translateY(-68%);
  transform: translateY(-68%);
  padding-top: 21rem;
  z-index: 500;
  width: 50%;
  text-align: right;
}

.home-image-right img {
  vertical-align: bottom;
  width: 75%;
}

#download {
  background: #2c80c4;
  color: #ffffff;
  padding-top: 12rem;
  padding-bottom: 12rem;
  text-align: center;
}

#download h1 {
  color: #ffffff;
}

#download h1::before {
  background-color: #ffffff;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

#download .lead {
  color: #ffffff;
  margin-top: 4.8rem;
}

#download .row {
  max-width: 800px;
}

#download .download-badges {
  list-style: none;
  margin: 0;
  text-align: center;
}

#download .download-badges li {
  display: inline-block;
  margin: 0 7.5px;
  padding-left: 0;
}

#download .download-badges li a {
  display: block;
  width: 230px;
  height: 71px;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 230px 71px;
}

<div class="overlay"></div>
<div class="home-content">

  <div class="row contents">
    <div class="home-content-left">

      <img src="https://stackoverflow.com/questions/66824266/images/logo.png" srcset="images/logo.png 1x" data-aos="fade-up">

      <h1 data-aos="fade-up">
        ....
      </h1>

      <div class="buttons" data-aos="fade-up">
        <a href="" class="smoothscroll button stroke">
          <span class="icon-circle-down" aria-hidden="true"></span> Download App
        </a>
      </div>

    </div>

    <div class="home-image-right">
      <img src="https://stackoverflow.com/questions/66824266/images/screen.png" srcset="images/screen.png 1x" data-aos="fade-up">
    </div>
  </div>

</div>
<!-- end home-content -->

<div class="home-scrolldown">
  <a href="" class="scroll-icon smoothscroll">
    <span>Scroll Down</span>
    <i class="icon-arrow-right" aria-hidden="true"></i>
  </a>
</div>

</section>
<!-- end home -->

<!-- download
================================================== -->
<section id="download">

  <div class="row">
    <div class="col-full">
      <h1 class="intro-header" data-aos="fade-up">Download Our App Today!</h1>

      <ul class="download-badges">
        <li><a href="https://play.google.com..." title="" class="badge-googleplay" data-aos="fade-up">Play Store</a></li>
      </ul>

    </div>
  </div>

</section>
<!-- end download -->

Gracias

1

Por favor agregue su HTML...

- Manas Khandelwal

26/03/2021 a las 21:04

Así es como se ve el código proporcionado actualmente: codepen.io/manaskhandelwal1/pen/ExZKwWb?editors=1100

- Manas Khandelwal

26/03/2021 a las 21:14

¿Puedes explicar qué quieres decir con sección de descargas = debajo de la imagen?

- Manas Khandelwal

26/03/2021 a las 21:15

1

Hay algo más que no has añadido en el CSS porque el resultado no es similar a tu imagen.

- Manas Khandelwal

26/03/2021 a las 21:16

@ManasKhandelwal, cuando digo "Sección de descarga = debajo de img", quiero decir que si hay una manera de configurar la sección de descarga (la azul) para que esté debajo de tLa imagen, sin importar dónde se coloque. De esa forma me aseguraré de que aunque aparezca a la derecha como en la página web seguirá estando debajo.

- Ben

26/03/2021 a las 21:26

------------------------------------

Puedes diseñar tu sitio web con dos códigos CSS específicos, uno para la vista de escritorio y el otro para la vista móvil. Quieres usar esta etiqueta multimedia y escribir tu CSS para la vista móvil en esta. puedes cambiar el valor máximo con desde 1px hace que si el ancho de su dispositivo es menor que 600 px, cambie el color de fondo a azul claro

   @media only screen and(max-width: 600px){
   body{
   background-color:light blue;
   }
   }

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

------------------------------------

Hmm, eso es difícil de decir, sin saber dónde está la imagen. Pero creo que este es tu problema:

.home-image-right {
  display: block;
  position: absolute;
  right: 0;
  top: 55%;
  -webkit-transform: translateY(-68%);
  -ms-transform: translateY(-68%);
  transform: translateY(-68%);
  padding-top: 21rem;
  z-index: 500;
  width: 50%;
  text-align: right;
}

posición: absoluta.

Al asignar un puesto, eliminas esta sección del flujo.

Echa un vistazo aquí: https://www.w3schools.com/css/css_positioning.asp

2

¿Hay alguna forma de decir como Sección de descarga = debajo de img?

- Ben

26/03/2021 a las 21:12

Aún estás adivinando cuál podría ser el problema y no lo sabes con certeza ni has proporcionado una solución. No importa lo que enlace, los criterios para una respuesta no se cumplen.

- tacoshy

26/03/2021 a las 21:50