Блог

Главная - Вопросы по программированию - Текст не реагирует и белое пятно на правой стороне веб-сайта

Текст не реагирует и белое пятно на правой стороне веб-сайта

#html #css #text #responsive

#HTML #css #текст #отзывчивый

Вопрос:

Я создаю свой первый настоящий веб-сайт от stratch, и я использовал некоторые из ваших ответов, которые были действительно полезны, так что спасибо всем 🙂

У меня просто есть вопрос, но, вероятно, в будущем его будет больше.

Я хотел бы, чтобы веб-сайт был отзывчивым, и я уже поместил код точки обзора, однако сам текст не реагирует, и из-за этого, когда вы уменьшаете размер экрана, в правой части страницы появляется белое пятно, которого там быть не должно. Мне было интересно, может ли кто-нибудь помочь мне выяснить, что не так с моим кодом.

уменьшенный веб-сайт с белым пятном

Спасибо!

 /* Text properties */
body {
    font-family: 'Futura', sans-serif;
  margin: 0;
  padding: 0;
  font-size: 10px;
}
h1 {
  position: relative;
  left:70vw;
  top:30vh;
  text-align: right;
  font-size: 3em;
  color: white
}
h2 {
    font-family: 'Roboto', sans-serif;
  position: relative;
  left:70vw;
  top:28vh;
  text-align: right;
  font-size: 2em;
  color: white
}
h3 {
  position: relative;
  left:70vw;
  top:28vh;
  text-align: right;
  font-size: 14px;
  color: white
}
h4 {
  position: relative;
  font-family: 'Arial';
  left:70vw;
  top:27vh;
  text-align: right;
  font-size: 14px;
  color: white
}
a {
  color: #FFFFFF;
}
p {
  margin: 0;
  padding: 0;
}
.bg {
  /* The image used */
  background-image: url("https://eskipaper.com/images/dark-background-4.jpg");

  /* Full height */
  height: 96vh;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
  #title
  {
position: absolute;
  }
.footer p
{
  padding-top: 6px;
  font-size: 12px;
}
.footer {
  margin: 0px;
  Height:30px;
  width:100%;
  background-color: black;
  color: white;
  text-align: center;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300amp;display=swap" rel="stylesheet">
      <link href="C:UsersTolaDocumentsTola PhotographyLanding Pagestyle.css" rel="stylesheet">
      <title>Tola Akindipe</title>
  </head>
<body>
  <div class="bg">
    <div id="title">
  <h1>Tola Akindipe</h1>
   <h2>Photography</h2>
    <h3><a href="/TolaMobile"style="text-decoration: none;" >Mobile Portfolioamp;nbsp;amp;nbsp;</a> <a href="/TolaDSLR"style="text-decoration: none;" >amp;nbsp;amp;nbsp;DSLR Portfolio</a></h3>
      <h4><a href="/contact" style="text-decoration: none;" >Contact</a></h4>
      </div>
    </div>
  <div class="footer">
    <p>Copyright 2020 @ Tola Akindipe - All Rights Reserved</p>
  </div>
  </body>
</html>

Ответ №1:

Попробуйте изменить свой CSS на это:

 /* Text properties */
body {
    font-family: 'Futura', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 10px;

    height: 100%;
    width: 100%;
}

h1 {
    text-align: right;
    font-size: 3em;
    color: white
}

h2 {
    font-family: 'Roboto', sans-serif;
    text-align: right;
    font-size: 2em;
    color: white
}

h3 {
    text-align: right;
    font-size: 14px;
    color: white
}

h4 {
    font-family: 'Arial';
    text-align: right;
    font-size: 14px;
    color: white
}

a {
    color: #FFFFFF;
}

p {
    margin: 0;
    padding: 0;
}

.bg {
    /* The image used */
    background: url("https://eskipaper.com/images/dark-background-4.jpg") center center no-repeat;

    /* Screen Height - Footer Height */
    height: calc(100vh - 30px);

    /* Set The Background Size */
    background-size: cover;

    /* Align The Content To The Center */
    display: flex;
    justify-content: center;
    align-items: center;
}


.footer p {
    padding-top: 6px;
    font-size: 12px;
}

.footer {
    margin: 0px;
    Height: 30px;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
}

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

1. Спасибо @Alex Shavkuta, мне было интересно, если бы я хотел, чтобы текст был дальше вправо, как бы я это сделал?

2. Самый простой способ переместить его вправо — указать заголовок position: relative; left: 20%

3. Спасибо, но когда я это делаю, я сталкиваюсь с той же проблемой — текст исчезает с экрана при уменьшении размера экрана. Вы знаете какой-нибудь способ обойти это?

4. Я предлагаю использовать библиотеку Bootstrap . Если вы не хотите использовать библиотеку bootstrap, вам нужно будет реализовать медиа-запросы CSS