HTML код CSS для начинающих не отображается правильно при меньшем разрешении

Я имею в виду, я написал некоторый код. Он отлично выглядит на экране 1920x1080, но мой друг сказал, что он не видит верхнюю часть веб-сайта (у него экран с меньшим разрешением), если он не уменьшит масштаб страницы со 100% (нормальный) до 50%. Конечно, он меньше, так что это не хорошо. Есть ли возможность исправить это, если все захотят проверить, правильно ли масштабирует мой объект до их разрешения? Вот мой код:

.grey {
  background-color: rgba(30, 32, 29, 0.5);
}
.brown {
  background-color: rgba(85, 41, 0, 0.6);
}
.red {
  background-color: rgba(255, 0, 0, 0.4);
}
.purple {
  background-color: rgba(152, 0, 255, 0.4);
}
.blue {
  background-color: rgba(0, 0, 255, 0.4);
}
.yellow {
  background-color: rgba(255, 255, 0, 0.3);
}

/* CSS reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 100%;
}
body {
  height: 100vh; /* középre rendezés */
  display: flex; /* középre rendezés  */
  align-items: center; /* középre rendezés  */
  justify-content: center;/* középre rendezés  */
  background: url('http://www.galaxyradio.es/wp-content/uploads/2016/09/Galaxy-Background.jpg') no-repeat center center fixed; /* teljes nagítású háttér */
  background-size: cover;/* teljes nagítású háttér */
}

#head, #headstory {
  text-align: center; /* középre rendezés szöveg*/
}

#head {
  margin: 0 auto;
}
img {
  margin-top: -60px;
  width: 19%;
  height: 19%;
  border-radius: 50%;
  padding: 1px;
  background-color: #666;
  filter: grayscale(50%);
  transition: all 0.5s ease-in-out;
}

img:hover {
  filter: grayscale(20%);
  transform: scale(1.1);
}

#profile-card {
  background-color: hsla(0, 0%, 100%, .5);
  border-radius: 4px;
  box-shadow: hsla(0, 0%, 0%,0.9) 10px 10px 80px;
}
#music-title {
  text-align: center;
  color:rgba(255,255,255,.8);
  font-size: 20px;
}
#contacts {
  text-align: center;
}
@media (max-height: 850px) {

  body {
    height: initial;
  }

  #profile-card {
    margin-top: 60px;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
 <div id="profile-card" class="grey">
   <div id="head" class="">
     <div id="imgsen" class="">
       <img src="http://kepkezelo.com/images/ljookd6qf43392rycg01.jpg" alt="coder">
     </div>
     <div id="headlines" class="">
     My name is
     <p> <h1>Junior Elliot</h1><p>
     My job is
     <p> <h3>Learn programming</h3>
     From
     <p> <h2><i class="fa fa-map-marker"></i> Don't tell anyone <br>but i dont even know.</h2>
       </div>
     <div id="headstory" class="">
       "Learn from every mistake you made. Adapt and Evolve".
     </div>
     <div id="music-title" class="grey">
         <h2>my music</h2> 
     </div>
     <div id="youtubelink" class="g">
       <iframe width="640" height="360" src="https://www.youtube.com/embed/kDqdM7wLVns" frameborder="0" allowfullscreen></iframe>
     </div>
   </div>
   <div id="contacts" class="">
     You can contact me via
     <p> <a href="https://en.wikipedia.org/wiki/Telepathy" target="_blank"> Telepathy </a>  </p>
   </div>
      </div>
</body>
</html>

Источник

1 ответ

Используйте "медиа-запрос", который поможет вам лучше изучить веб-дизайн.... изучение Bootstrap - это хорошо, но когда вы хорошо разбираетесь в css, тогда выбирайте Bootstrap, который поможет вам лучше изучить дизайн...

Проверьте здесь, как работает медиа-запрос

Источник
Другие вопросы по тегам