1

Tengo un problema que no tengo ni idea de cómo solucionar.

Se trata de un <div> del cual quiero que ocupe toda la pantalla del dispositivo en altura y anchura. Es más o menos un tipo "header", nada más.

Haces scroll y se visualiza el resto de contenido de la página.

Y bueno, lo "logré", pero en dispositivos grandes.

Por ejemplo, desde mi computadora funciona correctamente sin ningún problema, pero al momento de irme a dispositivos más pequeños, como por ejemplo, un celular, falla.

Exactamente en la anchura, no ocupa toda la anchura del teléfono y no sé por qué intenté poner width: 100vw; y width: 100%;, pero nada.

No ocupa todo el ancho de la pantalla, y como dije; no tengo ni idea del por qué.

Les adjunto el código:

SCSS:

.main-header {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 13px;
  text-align: center;
  line-height: 22px;
  letter-spacing: 6px;
  text-transform: uppercase;
  border-bottom: solid 1px #ddd;

  color: #000;
  background-color: #fff;

  height: 100vh;
  width: 100vw;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  position: relative;
  bottom: $body-padding-top;
  z-index: 2000;

  &__logo {
    width: 120px;
    height: 120px;
  }
}

HTML:

{% load static %}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %}La Voz Del Pensamiento{% endblock %}</title>
    
    <!-- Styles -->
    <link rel="stylesheet" href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'vendor/fontello/css/fontello.css' %}">
    <link rel="stylesheet" href="{% static 'css/base.css' %}?v1">
    {% block extrastyles %}{% endblock %}

    <!-- Extra Head -->
    {% block extrahead %}{% endblock %}
</head>

<body>

    <div class="main-header">
        <img src="{% static 'img/vp001.svg' %}" class="main-header__logo" alt="">
  
        <span>
            /* <span id="typed-text"></span> <span id="typed-cursor" style="transition: .0ms;">|</span> */
        </span>
    </div>

    <!-- .navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top navbar--blue-custom">
        <div class="container">
            
            <a href="{% url 'home' %}" class="navbar-brand">
                <img height="70px" width="70px" src="{% static 'img/vp001.svg' %}" alt="VP">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav" aria-controls="nav" aria-expanded="false">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="nav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="{% url 'podcast_list' %}" class="nav-link">Podcasts</a>
                    </li>
                    <li class="nav-item">
                        <a href="{% url 'article_list' %}" class="nav-link">Artículos</a>
                    </li>
                    <li class="nav-item">
                        <a href="{% url 'contact_form' %}" class="nav-link">Contacto</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav> 
    <!-- ./navbar -->

    ...
    
    <!-- Scripts -->
    <script src="{% static 'vendor/bootstrap/js/jquery-3.4.1.min.js' %}"></script>
    <script src="{% static 'vendor/bootstrap/js/popper.min.js' %}"></script>
    <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
    {% block extrajs %}{% endblock %}
</body>
</html>

Les adjunto una imagen del problema para que puedan visualizarlo:

¿Hay alguna manera de solucionarlo?

Si se preguntan que es lo negro, es el <body>. Tiene ese background. También se podrán fijar que hay una parte blanca, es el menú de navegación.

¡De antemano gracias por sus respuestas!

1
  • Listo, ya estoy analizando el problema para actualizar la respuesta. Commented el 5 mar. 2021 a las 0:47

1 respuesta 1

2

Debes eliminar algunas propiedades innecesarias

No es necesario utilizar la propiedad width: 100wv en la regla .main-header {} porque el elemento ocupará todo el ancho disponible.

Además, sería un poco contraproducente porque sería 100% de la anchura del viewport y no el 100% de la anchura de su espacio disponible, por lo que podría provocar desbordamiento.

Para lograr que ocupe todo el ancho de pantalla, como por ejemplo, lo que se muestra en las siguientes líneas:

/* Para efectos del Snippet he compilado el código SCSS */

body {
  background-color: black;
  /* Quitamos los espacios sobrantes*/
  margin: 0;
}

* {
  box-sizing: border-box;
}

.main-header {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 13px;
  text-align: center;
  line-height: 22px;
  letter-spacing: 6px;
  text-transform: uppercase;
  border-bottom: solid 1px #ddd;
  color: #000;
  background-color: #fff;

  height: 100vh;

  /* Propiedad innecesaria*/
  /* width: 100vw; */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  /* Se elimina esta propiedad, sin embargo, si su
     intención era dejarla no la elimines */
  /* bottom: $body-padding-top; */

  z-index: 2000;
}

.main-header__logo {
  width: 120px;
  height: 120px;
}
<div class="main-header">
  <img src="{% static 'img/vp001.svg' %}" class="main-header__logo" alt="">

  <span>
    /* <span id="typed-text"></span> <span id="typed-cursor" style="transition: .0ms;">|</span> */
  </span>
</div>

Debes aplicar los cambios que se mencionan en esta publicación. Sin embargo, están en los comentarios del código los cambios para que los pueda identificar con facilidad.

Note que he eliminado o comentado la propiedad bottom en la regla .main-header {} porque has especificado:

"...se trata de un <div>, del cual quiero que ocupe toda la pantalla del dispositivo en altura y anchura..."

Pero además, es necesario que el cuerpo (body) no tenga márgenes (con márgenes en 0), es decir:

body {
  ...

  /* Quitamos los márgenes por defecto */
  margin: 0;
}

Además de éste:

* {
  box-sizing: border-box;
}

Para evitar que el elemento se agrande con el relleno o el borde que se le establezcan.

Y lo más importante:

Eliminar la propiedad width: 100vw de la regla .main-header {} porque se aplica sobre un elemento de bloque y todo elemento de bloque ocupa el espacio disponible horizontalmente.

En el caso del código HTML siempre debes colocar entre las etiquetas <head>...</head> la siguiente línea:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Para que pueda surtir efecto en los Smartphones.

Además, todos los navegadores almacenan en caché datos para ayudar que los sitios web carguen más rápidos. Por lo tanto, si quiere lograr que su Smartphone cargue los cambios aplicado a su hoja de estilos:

<link rel="stylesheet" href="style.css" />

Deberá agregarle un parámetro, tal y como se puede observar en la siguiente línea:

<link rel="stylesheet" href="style.css?v1" />

Donde ?v1 hace que el navegador entienda que estás apuntando a otra ruta y por lo tanto, no cargará de su memoria caché los estilos viejos, sino, la versión más nueva; la que usted ha definido.

Por otra parte, si tiene otros elementos que sobrepasan el ancho de la pantalla de su Smartphone provocará también desbordamiento o el efecto que has indicado.

7
  • Gracias por tu respuesta! Pero he hecho lo que me has dicho, y aun sigue sin funcionar... copie exactamente el código que adjuntaste a un html aparte y lo probe y funciona... y cabe recalcar que uso Bootstrap... entonces creo que el problema es eso... he analizado el código CSS de Bootstrap respecto al <body> y aparentemente no veo nada que cause el problema... se te ocurre algo? Commented el 5 mar. 2021 a las 0:17
  • Sí. Los estilos de Bootstrap deben colocarse antes que los estilos que has definido. Además, debes tomar en cuenta los elementos que pueden sobrepasar el ancho disponible. Commented el 5 mar. 2021 a las 0:27
  • Trata de colocar en tu pregunta tu SCSS compilado a CSS para que coloques un Snippet. Allí, debes incluir Bootstrap y tratar de recrear el comportamiento no deseado para actualizar esta publicación con explicación adicional relacionada con ello. Commented el 5 mar. 2021 a las 0:30
  • Si, coloco los estilos de Bootstrap antes de los que he definido, por otra parte no entiendo mucho sobre los elementos que sobrepasen el ancho disponible... pero creo que no hay elementos que lo hagan, en todo caso he actualizado mi pregunta con todo el HTML para mayor claridad, y por cierto debajo del "header" hay un .navbar con .fixed-top no se si tenga algo que ver. Respecto a colocar el SCSS compilado en mi pregunta, ps no puedo, es demasiado, pero respecto al "header" el codigo SCSS que he mostrado es todo el que hay. Commented el 5 mar. 2021 a las 0:47
  • Ok, dale. Lo voy a analizar. Commented el 5 mar. 2021 a las 0:48

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.