0

Soy nuevo con React y estoy intentando que mi página ocupe el 100% del viewport sin exito.

Así se ve la página: vista actual de la página

Qué deberia modificar en el css del app? Por el momento tengo esto

.App {
    text-align: center;
    width: 100%;
   }

Desde ya muchas gracias !

3
  • 1
    Tu pregunta esta muy incompleta, por favor lee Cómo preguntar, edita y agrega el código para construir un ejemplo mínimo y necesario
    – user128299
    Commented el 29 jul. 2020 a las 15:40
  • Ahi lo modifique, esta mejor asi ? Commented el 29 jul. 2020 a las 15:41
  • Es difícil dar una sugerencia o respuesta sin conocer la estructura de la aplicación. Específicamente cómo has estructurado el JSX en el archivo App.js
    – Juan Marco
    Commented el 29 jul. 2020 a las 17:33

1 respuesta 1

0

Para solucionar tu problema, debes de ir al archivo index.css, este archivo vendría siendo el que maneje todo el css principal de tu aplicación, entonces cuando entres a ese archivo veras que tiene otro código fuente de css algo así:

 box-sizing: border-box;
 font-size: 18px;
}

body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
   'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
   sans-serif;
   background: #1D976C;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to right, #93F9B9, #1D976C);  /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to right, #93F9B9, #1D976C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   

}

code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
   monospace;
}

Y Entonces en body, o en el inicio que empieza con 
* { 
 box-sizing: border-box;
 font-size: 18px;
} 
agregas el **width: 100%;** 
2
  • Era eso @AllisLove. Muchas gracias ! Commented el 29 jul. 2020 a las 19:06
  • Con mucho gusto amigo.
    – AllisLove
    Commented el 30 jul. 2020 a las 13:47

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.