Иконка социальных сетей не будет оставаться в одном месте для окон разных размеров - PullRequest
Новая
       47

Иконка социальных сетей не будет оставаться в одном месте для окон разных размеров

0 голосов
/ 23 октября 2018

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

enter image description here

Однако при предварительном просмотре значок находится не в том же месте, а в положенииизменяется при увеличении или уменьшении размера окна.Есть ли решение для этого.(Я знаю, что это, вероятно, вопрос новичка, извините.)

Вот мой код: 

@media (max-width:480px) {
  body {
    background-image: url("Background.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
  }
}

@media(min-width: 481px) {
  body {
    background-image: url("Background.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
  }
}

.poll {
  position: absolute;
  top: 160px;
  left: 870px;
  width: 1.2%
}

.imgbox {
  padding: 0;
  display: grid;
  max-width: 100%;
  max-height: 100%;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0;
  position: fixed;
  width: 778px;
  top: 2px;
  height: 68px;
}

.base {
  padding: 0;
  display: grid;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  position: fixed;
  width: 1920px;
  top: 2px;
  height: 1080px;
  left: -1px;
}

.header {
  padding: 0;
  display: block;
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
  top: -1%;
  left: 0%;
  right: 0%;
}

.headersocial {
  padding: 0;
  display: block;
  position: fixed;
  max-width: 100%;
  max-height: 100%;
  margin-left: 0%;
  height: 21px;
  width: 27px;
  margin-right: -3%;
  top: 5%;
  right: 47%;
  bottom: auto;
  left: auto;
}
<html>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, inital-scale=1">
  <link rel="stylesheet" href="homevillagestyle.css">
  <link rel="icon" type="favicon/png" href="imgs/favicon.png">


  <title>TrackingSantaLive</title>
</head>

<body>

  <div class="header">
    <img src="Header original.png" alt="" width="778" height="68" class="header" />
    <img src="Team yantsu logo 2018 tp.png" alt "" width="120" height="120" class="header" />
  </div>

  <div class="headersocial">
    <a href="http://www.twitter.com/teamyantsu" target="_blank"><img src="Twitter Logo.png" alt "" width "27" height "21"/></a>
  </div>

  <div class="base"><img src="northpolebase.png" alt "" width="1440" height="900" class="base" /></div>

  <!-- <img class="poll" src="npcpoll.png" alt="poll"> --></div>
</body>

</html>

Кстати, значок находится под div headersocial.Спасибо за любую помощь.

...