Как мне сделать так, чтобы мой абзац не проходил весь путь вниз по странице при изменении разрешения?

ProgramBox

Как мне сделать так, чтобы мой абзац не проходил весь путь вниз по странице при изменении разрешения?

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

Я пытаюсь создать адаптивный веб-сайт, и когда я помещаю свой абзац на страницу и уменьшаю размер экрана, абзац проходит весь экран, а не в самом абзаце. Это просто башня длинного слова. Как я могу это исправить? Вот картина того, о чем я говорю. https://i.stack.imgur.com/HYJzs.png а также как мне сделать так, чтобы между словами было не так много места?

вот мой код:

 enter cod

 @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700amp;display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
nav {
  display: flex;
  height: 120px;
  width: 100%;
  background: #192841;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
  margin-bottom: 100px;
}
nav .logo {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li {
  margin: 0 5px;
}
nav ul li a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
  color: #111;
  background: #fff;
}
nav .menu-btn i {
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"] {
  display: none;
}
@media (max-width: 1000px) {
  nav {
    padding: 0 40px 0 50px;
  }
}
@media (max-width: 920px) {
  nav .menu-btn i {
    display: block;
  }
  #click:checked ~ .menu-btn i:before {
    content: "f00d";
  }
  nav ul {
    position: fixed;
    top: 80px;
    left: -100%;
    background: #111;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul {
    left: 0;
  }
  nav ul li {
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a {
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a {
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover {
    background: none;
    color: cyan;
  }
}

/*index*/

.contentHome {
  position: absolute;
  top: 5%;
  margin-top: 100px;

  text-align: center;
  width: 100%;

  color: #1b1b1b;
}
.contentHome div {
  font-size: 30px;
  font-weight: 400;
}

.contentHome2 {
  margin-left: 100px;
  margin-top: 150px;
  width: 40%;
  text-align: justify;
  height: 100px;
  align-items: center;
}

.paragrahHome h2 {
  white-space: nowrap;
}

 <!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Responsive Navigation Menu</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <nav>
      <div class="logo">Nick's Reviews</div>
      <input type="checkbox" id="click" />
      <label for="click" class="menu-btn">
        <i class="fas fa-bars"></i>
      </label>
      <ul>
        <li><a class="active" href="../index.html">Home</a></li>
        <li><a href="/mainPages/googleForm.html">Google Form</a></li>
        <li><a href="/mainPages/myMovies.html">Movies</a></li>
        <li><a href="/mainPages/myTvShows.html">Tv-Shows</a></li>
        <li><a href="/mainPages/topMovies.html">Top Movies</a></li>
        <li><a href="/mainPages/topTvShows.html">Top Tv-Shows</a></li>
      </ul>
    </nav>
    <div class="contentHome">
      <div>Welcome To Nick's Movie And Tv-Show Reviews</div>
    </div>
    <div class="contentHome2">
      <div class="paragrahHome">
        <h2>About this website:</h2>
        <p>
          Welcome to my Nick's Reviews. This website will be about the movies,
          and TV shows that I have watched and what I think about them. When I
          write my reviews, I will give honest feedback about them and the
          ratings I think they deserve. I will also list the ratings of movies
          and TV shows from popular websites (such as Rotten Tomatoes, IBDM, and
          other trusted sources). If you want to recommend and comment on a
          movie or TV show you want me to watch, just go to the Google form and
          fill it out.
        </p>
      </div>
    </div>
  </body>
</html>

Ответ №1:

в .contenthome2 вы определили ширину 40%, поэтому для мобильного просмотра она занимает всего 40% ширины, вы можете дать 40% для веб-просмотра, а использование медиа-запросов может увеличить ширину абзаца в соответствии с вашими требованиями .также поле слева:100 пикселей и поле справа:150 пикселей будет отлично работать для веб-просмотра, но займет больше места для мобильного просмотра . вы можете попробовать использовать значение в % .

Я изменил код и задал ширину:100% и заполнение:10% 15%;

 @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700amp;display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
nav {
  display: flex;
  height: 120px;
  width: 100%;
  background: #192841;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
  margin-bottom: 100px;
}
nav .logo {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li {
  margin: 0 5px;
}
nav ul li a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
  color: #111;
  background: #fff;
}
nav .menu-btn i {
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"] {
  display: none;
}
@media (max-width: 1000px) {
  nav {
    padding: 0 40px 0 50px;
  }
}
@media (max-width: 920px) {
  nav .menu-btn i {
    display: block;
  }
  #click:checked ~ .menu-btn i:before {
    content: "f00d";
  }
  nav ul {
    position: fixed;
    top: 80px;
    left: -100%;
    background: #111;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul {
    left: 0;
  }
  nav ul li {
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a {
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a {
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover {
    background: none;
    color: cyan;
  }
}

/*index*/

.contentHome {
  position: absolute;
  top: 5%;
  margin-top: 100px;

  text-align: center;
  width: 100%;

  color: #1b1b1b;
}
.contentHome div {
  font-size: 30px;
  font-weight: 400;
}

.contentHome2 {
  padding: 5% 10%;
  width: 100%;
  text-align: justify;
  height: 100px;
  align-items: center;
}

.paragrahHome h2 {
  white-space: nowrap;
}

 <!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Responsive Navigation Menu</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <nav>
      <div class="logo">Nick's Reviews</div>
      <input type="checkbox" id="click" />
      <label for="click" class="menu-btn">
        <i class="fas fa-bars"></i>
      </label>
      <ul>
        <li><a class="active" href="../index.html">Home</a></li>
        <li><a href="/mainPages/googleForm.html">Google Form</a></li>
        <li><a href="/mainPages/myMovies.html">Movies</a></li>
        <li><a href="/mainPages/myTvShows.html">Tv-Shows</a></li>
        <li><a href="/mainPages/topMovies.html">Top Movies</a></li>
        <li><a href="/mainPages/topTvShows.html">Top Tv-Shows</a></li>
      </ul>
    </nav>
    <div class="contentHome">
      <div>Welcome To Nick's Movie And Tv-Show Reviews</div>
    </div>
    <div class="contentHome2">
      <div class="paragrahHome">
        <h2>About this website:</h2>
        <p>
          Welcome to my Nick's Reviews. This website will be about the movies,
          and TV shows that I have watched and what I think about them. When I
          write my reviews, I will give honest feedback about them and the
          ratings I think they deserve. I will also list the ratings of movies
          and TV shows from popular websites (such as Rotten Tomatoes, IBDM, and
          other trusted sources). If you want to recommend and comment on a
          movie or TV show you want me to watch, just go to the Google form and
          fill it out.
        </p>
      </div>
    </div>
  </body>
</html>

Метки: Как мне сделать так, чтобы мой абзац не проходил весь путь вниз по странице при изменении разрешения?

Вопрос:

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

Ответ №1:

Вам также может понравиться

Выбрасывать сферы случайным образом из фиксированной точки

C SFML Как настроить вид игры с помощью движений мыши

ожидание верхнего уровня: проблема с решением для подключения к mongo db перед запуском сервера express