0

He estado haciendo un pequeño proyecto pero, al hacerlo responsive, he visto que se crea un espacio en blanco al llegar a los 400 píxeles el cual se hace cada vez más grande si se reduce la pantalla. He probado con todo lo que he encontrado aquí y en otros lados (como el wisth en html y body, por ejemplo) pero sigue sin salirme nada. Esto es lo que sucede: Error

Eso es todo, sería de grandísima ayuda si me pueden ayudar, muchas gracias por su tiempo :')

(Nuevo): Muchas gracias por su apoyo, chicos. Este es el código HTML:

<body>
    <header>
        <div class="Encabezado">
            <img src="Imagenes/001_ATe_Cuido_LOGO.svg" alt="Logo de TeCuido" class="Encabezado__Logo">
        </div>
        <nav>
            <div class="seccion-menu">
                <ul>
                    <li class="menu__items"><a href="index.html" 
                     class="menu__hipervinculos-inicio">Inicio</a></li>
                    <li class="menu__items"><a href="servicios.html" 
                     class="menu__hipervinculos">Servicios</a></li>
                    <li class="menu__items"><a href="nosotros.html" 
                     class="menu__hipervinculos">Sobre nosotros</a></li>
                </ul>
            </div>
            <div class="menu-contenedor">

                <input type="checkbox" id="generador">
                <label for="generador" class="boton"></label>

                <nav class="nav-menu-boton">
                    <a href="index.html">Inicio</a>
                    <a href="servicios.html">Servicios</a>
                    <a href="nosotros.html">Sobre nosotros</a>
                </nav>

            </div>
        </nav>
    </header>
    <main>
        <div class="contenedor animate__animated animate__fadeIn">
            <section class="contenedor__slider">
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Somos una empresa que se preocupa por tu salud y 
                         comodidad </h2>
                    </div>
                    <img src="Imagenes/undraw_medicine_b1ol.svg" alt="Imagen 
                         de doctores">
                </div>
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Realizamos consultas y teleconsultas de la mano 
                     de excelentes profesionales en el campo</h2>
                    </div>
                    <img src="Imagenes/undraw_doctors_hwty.svg" alt="Imagen 
                     de doctores">
                </div>
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Realizamos pruebas rápidas de COVID-19 a 
                        domicilio y a las empresas que lo soliciten</h2>
                    </div>
                    <img src="Imagenes/undraw_medical_care_movn.svg" 
                        alt="Imagen de doctores">
                </div>
                <div class="contenedor__slider__contenido">
                    <div>
                        <h2>Somos una empresa que se preocupa por tu salud y 
                            comodidad</h2>
                    </div>
                    <img src="Imagenes/undraw_medicine_b1ol.svg" alt="Imagen 
                    de doctores">
                </div>
        </div>
        </div>
        <section>
            <div class="confiar animate__animated animate__fadeInLeft">
                <article class="confiar__info">
                    <h2>¿Por qué confiar en nosotros?</h2>
                    <ul class="confiar__razones">
                        <li>Somos un equipo de profesionales altamente 
                            capacitados trabajando en los principales
                            hospitales del país, como el Hospital Nacional 
                            Edgardo Rebagliati Martins y el Instituto
                            Nacional de
                            Salud del Niño San Borja.</li>
                        <li>Contamos con amplia experiencia en el tratamiento 
                        de diversas enfermedades.<br></li>
                        <li>Brindamos un excelente servicio en la comodidad 
                            de tu hogar con todos los protocolos de
                            seguridad necesarios.</li>
                    </ul>
                </article>
                <aside>
                    <figure>
                        <img loading="lazy" src="Imagenes/medico index.webp" 
                            alt="Imagen de doctor"
                            class=" confiar__imagen animate__animated 
                            animate__fadeInRight">
                    </figure>

                </aside>
            </div>
        </section>

        <section>
            <div class="consejo animate__animated animate__fadeInLeft">
                <div class="consejo__info">
                    <h3 class="consejo__titulo">Consejo médico</h3>
                    <p>
                        Consume pescado 3 o más veces por semana, este nos 
                        aporta ácidos grasos y tiene una alta
                        cantidad de proteínas.
                    </p>
                </div>
            </div>
        </section>
    </main>
    <footer class="pie">
        <div class="redes__container animate__animated animate__fadeIn">
            <ul>
                <li><a href="https://www.facebook.com/TeCuidoEnfermera" 
                 target="#blank"
                        class="redes__container-facebook"><i class="fab fa- 
                               facebook-f"></i></a></li>
                <li><a href="mailto:[email protected]" 
                     class="redes__container-gmail"><i class="far          
                     fa-envelope"></i></a></li>
            </ul>
        </div>
        <h4 class="pie__copyright animate__animated 
         animate__fadeIn">Copyright 2020 © TeCuido Todos los derechos
            reservados</h4>
    </footer>
    <script src="main.js"></script>
</body>
</html>

Y el código CSS es este:

::selection {
    background-color: rgb(16, 82, 100);
    color: rgb(255, 255, 255);
}

.Encabezado {
    background: #f1efed;
    padding-left: 7em;
    padding-right: 7em;
    width: 100%;
}

.Encabezado__Logo {
    display: block;
    height: 12.375em;
    margin: auto;
    margin-bottom: 2.8em;
    padding: 0.3em;
    width: 27.375em;
}

ul {
    padding: 0.74em;
    text-align: center;
}

.seccion-menu {
    background: #f1efed;
    height: 2.8rem;
    margin-top: -2.8em;
    width: 100%;
}

.menu__items {
    display: inline-block;
}

.menu__hipervinculos,
.menu__hipervinculos-inicio {
    color: #8b7e78;
    font-family: Montserrat;
    font-size: 1.2rem;
    font-weight: lighter;
    text-decoration: none;
    margin-left: 5em;
    margin-right: 2.8em;
}

.menu__hipervinculos:hover,
.menu__hipervinculos-inicio:hover {
    color: rgb(41, 122, 116);
    transition: all 0.3s;
}

.menu__hipervinculos:active,
.menu__hipervinculos-inicio:active {
    color: rgb(30, 87, 83);
    transition: all 0.20s;
}

/*Sección menú desplegable*/
.menu-contenedor,
.boton,
.nav-menu-boton {
    position: absolute;
}

.menu-contenedor {
    margin: auto;
    top: 10%;
    left: 50%;
    margin-left: -20px;
}

#generador {
    display: none;
}

.boton {
    z-index: 999;
    margin-top: 9em;
    width: 43px;
    height: 43px;
    background: rgb(68, 219, 224);
    border-radius: 100%;
    transition: all 0.5s ease-in-out;
    box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.boton:before {
    position: absolute;
    top: 20px;
    left: 9px;
    content: '';
    width: 25px;
    height: 2px;
    background: #fff;
    transform: rotate(90deg);
}

.boton:after {
    position: absolute;
    top: 20px;
    left: 9px;
    content: '';
    width: 25px;
    height: 2px;
    background: #fff;
}

.nav-menu-boton {
    transform: translateY(-10%);
    opacity: 0;
    top: 10.875rem;
    left: -50px;
    transition: all 0.5s ease-in-out;
    background: white;
    margin: auto;
    margin-left: -8em;
    width: 25rem;
    border-radius: 5px;
    transform: translateY(0%);
    box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.nav-menu-boton a {
    text-align: center;
    font-size: 1.25rem;
    display: block;
    margin: 20px 0;
    color: rgb(68, 219, 224);
    text-decoration: none;
    font-family: Montserrat;
    transition: all 300ms;
}

.nav-menu-boton a:hover {
    color: rgb(73, 198, 202);
}

.nav-menu-boton a:active {
    color: rgb(69, 178, 182);
}

#generador:checked~.nav-menu-boton {
    opacity: 1;
    transform: translateY(10%);
}

#generador:checked~.boton {
    transform: rotate(135deg);
    box-shadow: 0 0 0 0 transparent;
}

.contenedor {
    width: 100%;
    overflow: hidden
}

.contenedor__slider {
    width: 100%;
    display: flex;
    margin-bottom: 2em;
}

.contenedor__slider__contenido {
    width: 100%;
    height: 20.5rem;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
    margin-top: 3em;
}

.contenedor__slider__contenido>img {
    width: 25rem;
}

.contenedor__slider__contenido>div {
    width: 40%;
}

.contenedor__slider__contenido h2 {
    color: #333333;
    font-weight: 800;
    font-family: Montserrat;
    font-size: 1.65rem;
    text-align: justify;
    line-height: 1.875em;
}

.contenedor__slider__contenido a {
    color: bisque;
    text-decoration: none;
    background-color: cadetblue;
    width: 6.25rem;
    display: block;
    padding: 0.9375em 0;
    text-align: center;
    border-radius: 0.1875rem;
    margin-top: 1.25rem;
}

.confiar {
    display: flex;
    margin-top: 3em;
    width: 100%;
}

.confiar__info>h2 {
    color: #4f7070;
    font-family: Montserrat;
    font-size: 2.5rem;
    font-weight: lighter;
    line-height: 1.2em;
    margin: 0.75em;
    margin-bottom: .5em;
    margin-top: -.1em;
    padding-left: 1.15em;
    text-align: center;
}

.confiar__info {

    color: #474747;
    border-radius: 0.3em;
    font-family: Montserrat;
    font-size: 1.25rem;
    line-height: 1.7em;
    margin-top: -.7em;
    padding-right: 1em;
    margin-left: 4em;
    padding-left: 1em;
    padding-top: 2em;
    text-align: justify;
    width: 70%;
    height: 31.5rem;
}

.confiar__razones {
    text-align: justify;
}

.confiar__imagen {
    border-radius: 0.3em;
    height: 30rem;
    margin-left: auto;
    margin-right: 1.5em;
    margin-top: 1.5em;
    width: 63%;
}

.consejo__titulo {
    color: rgb(89, 151, 155);
    font-family: Sansita;
    font-size: 2.5rem;
    margin: 0.125em;
    margin-bottom: .6em;
    padding: 0.3em;
    text-align: center;
}

.consejo__info {
    background: #f1efed;
    background: -webkit-linear-gradient(to right, #eeebeb, #f8f8f8);
    background: linear-gradient(to right, #eeebeb, #f8f8f8);
    border-radius: .5em;
    color: rgb(100, 89, 71);
    font-family: Sansita;
    font-size: 1.4rem;
    margin-left: 1.455em;
    margin-right: 1.455em;
    margin-top: 2.6em;
    margin-bottom: 3em;
    padding: .8em;
    text-align: center;
}

.Whatsapp {
    bottom: 2rem;
    height: 3.8rem;
    position: fixed;
    right: 2.5rem;
    width: 3.8rem;
}

.pie {
    margin-top: 1em;
    padding: .5em;
    text-align: center;
    width: 100%;
}

.redes__container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.redes__container ul li {
    display: inline-block;
    margin: 0.3125rem;
    width: 3.125rem;
    height: 3.125rem;
    text-align: center;
}

.redes__container ul li a {
    display: block;
    padding: 0 0.545rem;
    background-color: rgb(117, 106, 106);
    color: #fff;
    line-height: 3rem;
    font-size: 1.35rem;
    box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0, 0, 0, .2);
    transition: .2s;
}

.redes__container ul:hover a {
    filter: blur(2px);
}

.redes__container ul li a:hover {
    transform: translateY(-0.1875rem) scale(1.05);
    box-shadow: 0 0.3125rem 0.3125rem 0 rgba(0, 0, 0, .4);
    filter: none;
}

.redes__container-facebook:hover {
    background-color: rgb(21, 21, 206);
}

.redes__container-whatsapp:hover {
    background-color: rgb(117, 170, 11);
}

.redes__container-gmail:hover {
    background-color: rgb(187, 18, 18);
}

.pie__copyright {
    color: #242424;
    font-size: .8rem;
    font-family: Montserrat;
}

En las primeras líneas sale todo lo que le puse al body(Me guié un poco de lo que me recomendaron, lo que vi e, incluso, de cómo lo tenía hecho Twitter) pero nada :(

3
  • 1
    Buenas @Ronald , creo que sin adjuntar código difícilmente te podrá alguien ayudar...
    – gilito
    Commented el 16 mar. 2021 a las 21:43
  • @gilito tiene razón, sin el código no hay mucho que se pueda hacer, lo que si te puedo decir es que parece que es un problema de desbordamiento, verifica si algún div tiene mas width que el de tu pantalla y aplícale un overlflow:hiden; Commented el 16 mar. 2021 a las 21:52
  • Como dicen los compañeros, adjunta tu código .html y .css para que veamos cuál es el contenedor que te está generando ese espacio de más. Échale un ojo a los padding y a los margin, la mayoría de las veces son los culpables.
    – user128841
    Commented el 17 mar. 2021 a las 13:39

2 respuestas 2

1

Prueba con:

body{
  overflow-x: hidden;
}

o

 html{
      overflow-x: hidden;
    }
1
  • 2
    Aplicar esa regla es como parchear (ocultar) el error. Hay que averiguar cuál es el contenedor que está generando ese espacio extra.
    – user128841
    Commented el 17 mar. 2021 a las 13:37
0

Los problemas del espacio ocurren por dos secciones: aside y .Encabezado


El <aside>...</aside> es el que genera un espacio en blanco:

introducir la descripción de la imagen aquí

Puedes esconderlo cuando la imagen sea menor a 600 píxeles:

@media (max-width: 600px) {
    aside {
        display: none;
    }
}

El resto de detalles surge con .Encabezado:

  • Para mantener un width: 100% y usar padding es necesario agregar border-box:

    .Encabezado {
        background: #f1efed;
        padding-left: 7em;
        padding-right: 7em;
        box-sizing: border-box;
        width: 100%;
    }
    
  • El resto de detalles surge con el logo, pues tiene width: 27.375em, pero puedes anexar max-width: 100%; sin modificar mucho tu código a .Encabezado__Logo y usar object-fit para acomodar el tamaño y la colocación de la imagen

1
  • Buenas, chicoos. Muchas gracias por lo que me dijiste, Brayan, me sirvió bastante para mejorar esas partes. De igual forma, muchas gracias a todos. Después de darle a la suerte, me di cuenta que el problema está en el menú desplegable. Le puse un rem y eso dificulta mucho las cosas cuando el valor es menor a 400px. Ahora lo cambiaré, es una solución mucho más clara. Gracias por todo!
    – raranap03
    Commented el 18 mar. 2021 a las 22:51

Tu Respuesta

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

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