2

He tenido algunos problemas con el responsive design. La cuestión es que mi portfolio en pantalla grande funciona corréctamente, pero cuando lo utilizo en el móvil no se ajusta bien a la pantalla. Aparece, por ejemplo, una barra de scroll horizontal, y no debería aparecer, debería estar encajado (en el sentido horizontal). Pienso que pueden ser por los vídeos incrustrados desde youtube. He aquí el código de los vídeos:

@media screen and (max-width: 600px) {

  .video-item-in{
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
        height: 0;
    }
    
    .video-item-in iframe{
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }
}
<div class="portfolio-item">
    <div class="portfolio-description has-margin-right" data-aos="fade-right" data-aos-delay="100">
        <h6>Video Edition</h6>
        <h1>Shortfilm Opening</h1>
        <p>Here is an opening created by a mini-show developed by Fine Arts Faculty of UCLM (Spain). It's made from After Effects and Premiere.
        </p>
    </div>
    <div class="video-item-in" data-aos="fade-left" data-aos-delay="200">
         <iframe width="560" height="315" src="https://www.youtube.com/embed/qgv1iV9nvQg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
    </div>
</div>

Alguna idea? Este es el link a mi portfolio para que se entienda mejor:

https://www.carlos-perez.com/

Gracias!

1 respuesta 1

1

El problema se encuentra en una regla que tienes en los <section>:

section {
    padding: 6rem;
}

Ese padding, en dispositivos pequeños, provoca que el contenido no quepa dentro y exceda su contenedor, provocando ese scroll lateral que mencionas. Bájaselo por ejemplo a 2rem en tu mediaquerie y se te debería resolver.

EDIT

Adicionalmente he visto que otra causa del problema son las animaciones que tienes sobre algunas secciones que hacen que los elementos aparezcan desde los laterales.

Estas animaciones suelen funcionar teniendo el contenido que quieres que aparezca desplazado hacia un lado para después animarlo hasta la posición donde quieres que aparezca (provocando que la sección crezca y desborde a su padre). Una solución que se me ocurre para evitar que el layout se vea afectado por esto es dejar a tus <section> con estas reglas:

section {
    padding: 2rem;
    overflow-x: hidden;
}
3
  • Te juro que te quiero dar un abrazo. Llevo 3 días intentando de todo, preguntando en stackover en inglés, preguntando en foros, viendo vídeos, mandándole mensajes al que hizo el vídeo en el que me he basado... y nada. Y lo tuyo a funcionado, mil gracias! Solo una cosa: sigue habiendo un pequeño fallo, y es que en el móvil, cuando tocas con el dedo la sección de Contactar conmigo, se despliega el navigation menu, y no se por qué. Se te ocurre la causa? el 15 may. 2020 a las 17:44
  • Me alegra de que te sirviera de ayuda. Ese segundo problema que mencionas no he conseguido reproducirlo al abrir tu Web desde el móvil (he toqueteado en todos lados de la sección que mencionas y no hay manera).
    – phpMyGuel
    el 15 may. 2020 a las 18:59
  • Qué raro... A mi me sigue pasando, y en el móvil de terceras personas también ocurre. En cualquier caso, muchas gracias! el 17 may. 2020 a las 9:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.