Проблема с адаптивностью дизайна

Question

В чём проблема. Для адаптивности я решил использовать GRID систему, однако, у меня есть надоедливый объект - ник пользователя (profile-subnick), проблема в том, что при использовании фиксированного размера колонки (к примеру 200 пикселей, и например 8 столбцов), колонки, соответсвенно - статичные и никуда не двигаются, однако при использовании, например 33 процентов размера колонок, они, соответственно, уменьшаются под размер окна, это хорошо, однако проблема в том, что ник пользователя смещается вместе с колонками(ну, это логично, собственно), как можно сделать так, чтобы колонка осталась изменяемой, а ник пользователя двигался по нужной мне траектории пути, так как, в данный момент он просто-напросто заползает под аватарку профиля и мне не годится такой результат, к примеру, было бы хорошо, чтобы он оказался потом под профилем или как-то еще. Если менять какие-то отдельные части коды, затрагивается достижения, которые во всех случаях должны быть статичными и под аватаркой, или же сама аватарка куда-то улетучивается. Честно говоря, я более-менее понимаю происходящее внутри GRID кода, однако я уже сильно запутался.

* {
  box-sizing: border-box;
}

div {
display: grid;
}

.achievements { /* Основные изменения таблицы достижений. */
  display: grid;
  grid-column: 1;
  grid-row: 15;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 1fr);
  justify-items: left;
  position: relative; 
}

.achi:hover::after {
  content: attr(title);
  position: absolute;
  top: 10px;
  margin: auto;
  cursor: help;
  left: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 10;
  display: none;
}

h3 {
  color: white;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.ach, .ach1 { /* Позиционирование иконок внутри таблицы достижений */
   margin: 500px;
   padding: 10px;
}

.achievement-table { /* Таблица достижений. */
  width: 32%;
  grid-column: 1;
  border: none;
  grid-row: 15;
  margin: 1px;
  border: 2px solid aqua;
  justify-content: center;
}

section {
  background-color: #190b14
}

.achievement-table td { /* Позиционировани ячеек таблицы */
  padding: 1px;
  margin: 1px;
  text-align: center;
}

.Profile { /* Header часть страницы, Баннер, аватарка, ник, другой ник и достижения */
 display: grid;
 grid-template-columns: repeat(8, 200px); /* 8 не адаптивных колонок, 200 пикселей каждая, при изменении на адаптивные единицы - сдвигаются Profile-subnick */
 background-color: #190b14;
 grid-template-rows:  repeat(18, 50px); /* 18 строчек по 50 пискелей каждая, при изменении на адаптивные единицы измерения прыгает achivments */
}

.Profile-pfp { /* Аватарка пользователя */
  display: grid; 
  grid-column: 1;
  grid-row: 10;
  margin-left: 1vw;
  top: 550px;
  justify-self: flex-start;
  z-index: 1; 
}

.Profile-pfp img { /* Фиксированный размер аватарки */
  width: 180px;
  height: 180px;
}

.profile-subnick { /* Проблемный элемент - основный ник пользователя */
  display: grid;
  grid-column: 2;
  grid-row: 12;
  background-color: transparent;
  justify-self: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="css/Profile.css" />
  <title>Your Profile</title>
</head>
  <body>
    <aside class="Sidebar-container">
       <nav class="Sidebar">
        <div class="logo"><span class="tf-logo">Tattoo Foundler</span></div>
        <button class="sidebar-button">
          <img class="sideicon" src="css/home1.png" alt="Home">
          <span>
          Home
          </span>
        </button>
        <button class="sidebar-button">
          <img class="sideicon" src="css/search2.png" alt="Search">
          <span>
          Search
          </span>
        </button>
        <button class="sidebar-button">
          <img class="sideicon" src="css/envelope3.png" alt="Messages">
          <span>
          Messages
          </span>
        </button>
        <button class="sidebar-button">
          <img class="sideicon" src="css/heart1.png" alt="Favorites">
          <span>
          Favorites
          </span>
        </button>
       </nav>
    </aside>
    
    <section class="Profile">
      <div class="secondary-nick">
        <div>
          <h3>CharonIkh</h3>
          <img src="css/banner1.jfif" id="banner">
          <span>50 Sketches</span>
        </div>
      </div>
      <div class="Profile-pfp">
         <img src="css/180x180.png" alt="pfp" > 
      </div>
      <div class="profile-subnick">
        <h3>CharonIkh</h3>
        <span>@CharonIkh</span>
      </div>
      <figure class="achievements">
        <div class="row">
          <table cellspacing="0px" cellpadding="0px" class="achievement-table" title="соси">
            <tr>
              <td><img class="achi" src="css/medalred.png"></td>
              <td><img class="achi" src="css/medalgreen.png"></td>
              <td><img class="achi" src="css/medalblue.png"></td>
            </tr>
            <tr>
              <td><img class="achi" src="css/badgered.png"></td>
              <td><img class="achi" src="css/badgegreen.png"></td>
              <td><img class="achi" src="css/badgeblue.png"></td>
            </tr>
            <tr>
              <td><img class="achi" src="css/medalorange.png"></td>
              <td><img class="achi" src="css/medallime.png"></td>
              <td><img class="achi" src="css/medalmarine.png"></td>
            </tr>
            <tr>
              <td><img class="achi" src="css/badgeorange.png"></td>
              <td><img class="achi" src="css/badgelime.png"></td>
              <td><img class="achi" src="css/badgemarine.png"></td>
            </tr>
          </table>
        </div>
      </figure>
    </section>
    

  </body>
</html>

Примерно так выглядит это всё сейчас.

Про баннер промолчу, это не так важно сейчас, при уменьшении - он должен пропасть вовсе.

БЛОГ НА HUSL

Проблема с адаптивностью дизайна

Ответы (0 шт):