Блог

Главная - Вопросы по программированию - div не реагирует на экран браузера?

div не реагирует на экран браузера?

#html #css

#HTML #css

Вопрос:

Я новичок в html и css. У меня есть этот небольшой шаблон. Он отлично работает, когда экран браузера заполнен, но когда я делаю браузер маленьким, мои divs просто выходят из всего. Я пробовал много вещей, таких как максимальная ширина, высота до авто, поле до авто, используя размер текста с vw, но ничего не работает

вот мой html-код

 html {}

body {
  padding: 0;
  margin: 0;
  background-color: Wheat;
}

.top {
  background-image: url("names.jpeg");
  background-size: contain, cover;
  overflow: hidden;
  color: White;
  padding: 0 100px 0 100px;
  font-family: Times New Roman;
}

.titel {
  background-image: url("titel.webp");
  background-size: contain, cover;
  color: Black;
  text-align: center;
  font-family: Comic Sans Ms;
  overflow: hidden;
  width: 100%;
  margin: auto;
}

.grid-container {
  display: grid;
  background-image: url("grid.jpeg");
  background-size: contain, cover;
  padding: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  background-color: Grey;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  padding: 100px;
  text-align: center;
  justify-content: center;
}

a {
  color: White;
  text-decoration: none;
  font-family: Script MT;
  font-size: 30px;
  font-weight: bold;
}

.s {
  background-image: url("s.png");
  background-size: contain, cover;
}

.t {
  background-image: url("hm.png");
  background-size: contain, cover;
}

.tch {
  background-image: url("t.png");
  background-size: contain, cover;
}

.iot {
  background-image: url("iot.png");
  background-size: contain, cover;
}

.fc {
  background-image: url("fc.png");
  background-size: contain, cover;
}

.d {
  background-image: url("d.png");
  background-size: contain, cover;
}

.name {
  border: solid 3px White;
  border-radius: 15px;
  padding: 10px
}

.tof {
  border: solid 3px Black;
  border-radius: 50px;
  padding: 15px;
  margin: 10px 500px 10px 500px;
}  
 <!Doctype html>
<meta name="viewport" content="width=device-width" />
<html>

<head>
  <title>Train of Thoughts</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="top">
    <h3 class="name" style="float: left;">M</h3>
    <h3 class="name" style="float: right;">f</h3>
  </div>
  <div class="titel">
    <h1 class="tof">Train of Thoughts</h1>
  </div>
  <div class="grid-container">
    <div class="grid-item s"><a href="">S</a></div>
    <div class="grid-item tch"><a href="">T</a></div>
    <div class="grid-item t"><a href="">R</a></div>
    <div class="grid-item d"><a href="">D</a></div>
    <div class="grid-item iot"><a href="">I</a></div>
    <div class="grid-item fc"><a href="">F</a></div>
  </div>
</body>

</html>

вот в чем проблема
скриншот

Ответ №1:

Я смог воспроизвести проблемы здесь. Я думаю, что проблема связана с полями, применяемыми к классу tof . Чтобы исправить, вы можете использовать css media queries стили ниже

 @media only screen and (max-width: 480px) {
    .tof {margin: 20px;}
    .grid-container { grid-template-columns: repeat(1, 1fr) !important;overflow: hidden;}
}

@media only screen and (max-width:768px) {
    .tof {margin: 20px;}
    .grid-container { grid-template-columns: repeat(2, 1fr);overflow: hidden;}
}

Ответ №2:

Было ли это необходимо? Я отметил свои правки в css. Правки были сделаны в titel классах и tof классах.

 html{
}
body{
    padding: 0;
    margin: 0;
    background-color: Wheat;
}
.top{
    background-image: url("names.jpeg");
    background-size: contain, cover;
    overflow: hidden;
    color: White;
    padding: 0 100px 0 100px;
    font-family: Times New Roman;
}
.titel{
    background-image: url("titel.webp");
    background-size: contain, cover;
    color: Black;
    text-align: center;
    font-family: Comic Sans Ms;
    overflow: hidden;
    /*width: 100%;*/ /*delete this it*/
    width: 450px; /*add this it*/
    max-width: 100%; /*add this it*/
    margin: auto;
}
.grid-container {
    display: grid;
    background-image: url("grid.jpeg");
    background-size: contain, cover;
    padding: 30px;
    grid-template-columns: repeat(3, 1fr);
}

.grid-item {
    background-color: Grey;
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    padding: 100px;
    text-align: center;
    justify-content: center;
}
a{
    color: White;
    text-decoration: none;
    font-family: Script MT;
    font-size: 30px;
    font-weight: bold;
}
.s{
    background-image: url("s.png");
    background-size: contain, cover;
}
.t{
    background-image: url("hm.png");
    background-size: contain, cover;
}
.tch{
    background-image: url("t.png");
    background-size: contain, cover;
}
.iot{
    background-image: url("iot.png");
    background-size: contain, cover;
}
.fc{
    background-image: url("fc.png");
    background-size: contain, cover;
}
.d{
    background-image: url("d.png");
    background-size: contain, cover;
}
.name{
    border: solid 3px White;
    border-radius: 15px;
    padding: 10px
}
.tof{
    border: solid 3px Black;
    border-radius: 50px;
    padding: 15px;
    /*margin: 10px 500px 10px 500px;*/ /*delete this it*/
}  
 <!Doctype html>
    <meta name="viewport" content="width=device-width"/>
<html>
<head>
    <title>Train of Thoughts</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="top">
        <h3 class="name" style="float: left;">M</h3>
        <h3 class="name" style="float: right;">f</h3>
    </div>
    <div class="titel">
        <h1 class="tof">Train of Thoughts</h1>
    </div>
    <div class="grid-container">
        <div class="grid-item s"><a href="">S</a></div>
        <div class="grid-item tch"><a href="">T</a></div>
        <div class="grid-item t"><a href="">R</a></div>
        <div class="grid-item d"><a href="">D</a></div>
        <div class="grid-item iot"><a href="">I</a></div>
        <div class="grid-item fc"><a href="">F</a></div>
    </div>
</body>
</html>

Ответ №3:

Укажите размер шрифта по ширине экрана. Вы можете изменить его на rem / em в зависимости от вашей корневой конфигурации размера шрифта.

 html {}

body {
  padding: 0;
  margin: 0;
  background-color: Wheat;
  width: fit-content;
}

.top {
  background-image: url("names.jpeg");
  background-size: contain, cover;
  overflow: hidden;
  color: White;
  padding: 0 100px 0 100px;
  font-family: Times New Roman;
}

.titel {
  background-image: url("titel.webp");
  background-size: contain, cover;
  color: Black;
  text-align: center;
  font-family: Comic Sans Ms;
  overflow: hidden;
  width: max-content;
  font-size: calc(1em   0.8vw);
}

.grid-container {
  display: grid;
  background-image: url("grid.jpeg");
  background-size: contain, cover;
  padding: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  background-color: Grey;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  padding: 100px;
  text-align: center;
  justify-content: center;
}

a {
  color: White;
  text-decoration: none;
  font-family: Script MT;
  font-size: 30px;
  font-weight: bold;
}

.s {
  background-image: url("s.png");
  background-size: contain, cover;
}

.t {
  background-image: url("hm.png");
  background-size: contain, cover;
}

.tch {
  background-image: url("t.png");
  background-size: contain, cover;
}

.iot {
  background-image: url("iot.png");
  background-size: contain, cover;
}

.fc {
  background-image: url("fc.png");
  background-size: contain, cover;
}

.d {
  background-image: url("d.png");
  background-size: contain, cover;
}

.name {
  border: solid 3px White;
  border-radius: 15px;
  padding: 10px
}

.tof {
  border: solid 3px Black;
  border-radius: 50px;
  padding: 15px;
  margin: 10px 500px 10px 500px;
}  
 <!Doctype html>
<meta name="viewport" content="width=device-width" />
<html>

<head>
  <title>Train of Thoughts</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="top">
    <h3 class="name" style="float: left;">M</h3>
    <h3 class="name" style="float: right;">f</h3>
  </div>
  <div class="titel">
    <h1 class="tof">Train of Thoughts</h1>
  </div>
  <div class="grid-container">
    <div class="grid-item s"><a href="">S</a></div>
    <div class="grid-item tch"><a href="">T</a></div>
    <div class="grid-item t"><a href="">R</a></div>
    <div class="grid-item d"><a href="">D</a></div>
    <div class="grid-item iot"><a href="">I</a></div>
    <div class="grid-item fc"><a href="">F</a></div>
  </div>
</body>

</html>