Блог

Главная - Вопросы по программированию - html-тег перестает быть полной шириной на узких видовых экранах

html-тег перестает быть полной шириной на узких видовых экранах

#html #css #css-grid

#HTML #css #css-grid

Вопрос:

Мой <html> тег перестает занимать всю ширину на узких видовых экранах (даже несмотря на то, что примененный зеленый цвет фона, кажется, охватывает всю ширину). Это приводит к тому, что моя css-сетка с 1 строкой и 1 столбцом становится нецентрированной по горизонтали. На этом скриншоте я нависаю над <html> тегом, пока видовой экран узкий:

введите описание изображения здесь

Как только устройство становится шире, <html> занимает всю ширину, а содержимое центрируется по горизонтали.

 html,
body {
  background-color: #46d689;
  align-content: space-evenly;
  display: grid;
  justify-items: center;
  align-content: space-evenly;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
}

.subtitle {
  text-align: center;
}

.container {
  display: grid;
  justify-items: center;
  align-content: space-evenly;
  grid-template-columns: repeat(1, minmax(240px, 1fr));
  grid-template-rows: 1fr;
}  
 <section className="container">
        <img
          alt="logo"
          style={{
            height: "250px",
            objectFit: "contain",
          }}
          src={require("./img/logo_web.png")}
        />
        <h4 style={{ color: "#FFF" }}>The Vegan Repository</h4>
        <h4
          style={{
            color: "#FFF",
            fontWeight: "400",
            marginBottom: "0",
          }}
        >
          Find Vegan Products in your Local Community
        </h4>

        <span
          style={{
            color: "#FFF",
            marginBottom: "20px",
            display: "inline-block",
          }}
        >
          Coming Soon to iOS
        </span>
        <br />
        <div>
          {/* <a href="https://itunes.apple.com/nz/app/surfboard-volcalc/id1223913734?mt=8"> */}
          <i className={"fa fa-apple fa-5x"} style={{ color: "#FFF" }}></i>
          {/* </a> */}
        </div>

        <p style={{ color: "#FFF !important" }}>
          If you have any issues, questions or suggestions, contact me directly
          at{" "}
          <span>
            <a href="mailto:bt.farquhar@gmail.com">bt.farquhar@gmail.com</a>
          </span>
        </p>
      </section>

Почему <html> тег перестает занимать всю ширину в узких видовых экранах, в результате чего мой контент становится нецентрированным?

Комментарии:

1. Пожалуйста, создайте фрагмент кода.

Ответ №1:

просто используйте:

 html,body{
  height: 100vh !important;
  width: 100vw !important;
}

Он должен это сделать.