Как при уменьшении окна убрать текст и оставить иконки. Отзывчивый дизайн

Question

Сделал сайдбар, написал код на ДжаваСкрипте, вроде бы всё должно работать, но проблема в том, что я хочу, когда пользователь уменьшает намеренно окно др 770 пикселей, сайдбар сдвигался и оставлял исключительно иконки, я сделал это, но проблема в том, что остаётся текст рядом с ними, как можно сделать так, чтобы текст пропадал на время уменьшения окна и возвращался при увеличении.

const sidebar = document.querySelector(".sidebar");
const buttons = sidebar.querySelectorAll(".sidebar-button");

function resizeHandler() {
  if (window.innerWidth <= 770) {
    for (const button of buttons) {
      button.querySelector("span").style.display = "none";
    }
  } else {
    for (const button of buttons) {
      button.querySelector("span").style.display = "block";
    }
  }
}

window.addEventListener("resize", resizeHandler);

resizeHandler();

:root {
   font-size: 10px;
 }

 *,
 *::before
 *::after {
   box-sizing: border-box;
 }

div {
  display: block;

}

.flexcontainer {
  max-width: 93.5rem;
  margin: 0 auto;
  padding: 0 2rem;
  position: absolute;
  left: 300px
}

.btn

body {
  background-color: #190b14;
  padding-bottom: 3rem;
  color: white;
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
  height: 1197px;
  width: 1380px;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

img {
  display: block;
}

.SecondaryNick {
  background-color: #190b14;
  width: 933px;
  height: 26px;
  transform: translate(0px, -11px);
  position: absolute;
 }

.1.1 {
 position: relative;
 width: 220px;
 height: 56px;
 }

 .sidebar {
   position: fixed;
   padding-top: 20px;
   top: 0;
   left: 0;
   height: 100vh;
   width: 200px;
   background-color: #190b14;
   border-right: 1px solid #ddd;
   transition: width 0.2s ease-in-out;
 }

 .sidebar .logo {
   font-family: "The Last Shuriken";
   font-size: 24px;
   color: white;
   padding-top: 20px ;
   margin-top: -20px;
   margin-bottom: 10px;
   text-align: center;
 }
 .sidebar-button {
   width: 100%;
   height: 50px;
   border: none;
   background-color: #190b14;
   color: #fff;
   text-align: left;
   font-size: 16px;
   margin-bottom: 1px;
   cursor: pointer;
   display: flex;
   align-items: center;
 }

 .sidebar-button img {
   margin-right: 10px;
 }

 @media (max-width: 768px) {
   .sidebar {
     width: 50px;
   }

   .sidebar-button img {
     display: block;
     margin: 0 auto;
   }

   .sidebar-button span {
     display: none;
   }
 }

 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.middle {
  width: 1500px;
  border-right: 2px solid #8339C7;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: block;
}


h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  padding: 0;
  margin: 0;
  color: white;
  box-sizing: border-box;
}
 .achivments {
   background-color: #190b14;
   width: 180px;
   height: 200px;
   transform: translate(-173px, 0px)
 }


.bio {
  margin-top: 0px;
  margin-left: 173px;
  clear: both;
  background-color: #190b14;
  display: block;
  content: "";
  line-height: 40px;
  font-size: 15px;
  height: 200px;
  width: 760px
}

.editprfoile {
  position: absolute;
  top: 355px;
  left: 829px;
}

.imgprof {
  border-radius: 100%;
  border: 4px solid #8339C7;
  width: 180px;
  height: 180px;
  transform: translate(20px, -36px);
  overflow: hidden;
  position: absolute;
  top: 235px;
  left: 10px;
}

.bio2 {
  margin-top: 0px;
  margin-left: 0px;
  width: 760px;
  color: white;
  transform: translate(25px, -177px);
  line-height: 20px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
}

.achivmentspng {
  transform: translate(26px, 94px);
}

.achivmentspng1 {
  transform: translate(65px, 94px);
}

.achivmentspng2 {
  transform: translate(65px, 29px);
}

.achivmentspng3 {
  transform: translate(65px, 67px);
}

.achivmentspng4 {
  transform: translate(26px, 0px);
}

.achivmentspng5 {
  transform: translate(26px, 3px);
}

.achivmentspng10 {
transform: translate(106px, -98px);
}

.achivmentspng11 {
  transform: translate(106px, -62px);
}

.achivmentspng12 {
  transform: translate(106px, -128px);
}

.achivmentspng13 {
  transform: translate(143px, -195px);
}

.achivmentspng14 {
  transform: translate(143px, -192px);
}

.achivmentspng15 {
  transform: translate(143px, -190px);
}
.bio3 {
  margin-top: 0px;
  margin-left: 0px;
  line-height: 20px;
  font-family: "Inter", sans-serif;
  color: white;
  transform: translate(25px, -135px);
  font-size: 15px;
}

.postsheading {
  padding: 0;
  background-color: #190b14;
  margin: 0;
  width: 933px;
  box-sizing: border-box;
  display: block;
}

.razdeleniepostov {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #8339C7;
  font-weight: bold;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.HeadingSlova {
  font-family: "Inter", sans-serif;
  font-weight: bold;
  display: block;
  cursor: pointer;
  padding: 0;
  color: white;
  margin-bottom: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.gallery {
  gap: 3px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  vertical-align: baseline;
  box-sizing: border-box;
  position: relative;
  width: 933px;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  top: 0%;
  background-color: #190b14;
  right: 0%;
}

<!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>


<div class="sidebar">
  <div class="logo">Tattoo foundler</div>
  <button class="sidebar-button">
    <img src="css/home.png" alt="Home">
    Home
  </button>
  <button class="sidebar-button">
    <img src="css/search.png" alt="Search">
    Search
  </button>
  <button class="sidebar-button">
    <img src="css/envelope.png" alt="Messages">
    Messages
  </button>
  <button class="sidebar-button">
    <img src="css/heart1.png" alt="Favorites">
    Favorites
  </button>
</div>

<div class="flexcontainer">
  <div class="middle">
    <section class="SecondaryNick">
      <i class="strelkaokolonika" id="strelkaokolonika"></i>
      <div>
        <h3>CharonIkh</h3>
        <span>50 Sketches</span>
      </div>


    </section>
    <section class="profile">
      <div class="dlinayakartinka">
        <img src="css/85f261d42e472b72da4232ccb48acc44.jpg" height="300" width="933" alt="banner" id="banner"/>
        <div class="editprfoile">Edit Profile</div>
      </div>
      <div class="bio">
        <div class="achivments">
          <div class="achivmentspng">
            <img src="css/medal.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng1">
            <img src="css/medal.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng2">
            <img src="css/badge.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng3">
            <img src="css/badge.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng4">
            <img src="css/badge.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng5">
            <img src="css/badge.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng10">
            <img src="css/medal.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng11">
            <img src="css/medal.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng12">
            <img src="css/badge.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng13">
            <img src="css/badge.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng14">
            <img src="css/badge.png" height="32" width="32" alt="test">
          </div>
          <div class="achivmentspng15">
            <img src="css/badge.png" height="32" width="32" alt="test">
          </div>
        </div>
        <div class="profpic">
          <div class="imgprof">
            <img src="css/avatar example.jpg" height="180" width="180" alt="profpicsd" id="avatar"/>
          </div>
        </div>
        <div class="bio2">
          <h3>CharonIkh</h3>
          <span>@CharonIkh</span>
        </div>
        <div class="bio3">
        <p>10 year</p>
        <p>Latvia, Riga, Gogola iela 19</p>
        <p>Dotwork, Anime, Neon</p>
        <span>Phone number avaible only for clients!</span>
        </div>
      </div>
    </section>


    <section class="postsheading">
      <div class="razdeleniepostov">
        <p class="HeadingSlova">Works</p>
        <p class="HeadingSlova">Sketches</p>
        <p class="HeadingSlova">Reviews</p>
      </div>
    </section>


    <section class="gallery">
      <div class="gallery-item" tabindex="0">
        <img src="css/d53ab946534d55df54bdf349c82d816d.jpg" height=301" width="301" alt="gallerypost1" class="gallerypost1"/>
        <span class="media-icon"></span>
      </div>

      <div class="gallery-item" tabindex="0">
        <img src="css/09322e69f88642d4950035ea6fed6e62.jpg" height=301" width="301" alt="gallerypost2" class="gallerypost2"/>
        <span class="media-icon"></span>
      </div>

      <div class="gallery-item" tabindex="0">
        <img src="css/7060f8c1d3790ef605da07cb72e43f7d.jpg" height=301" width="301" alt="gallerypost3"
             class="gallerypost3"/>
        <span class="media-icon"></span>
      </div >

      <div class="gallery-item" tabindex="0">
        <img src="css/06bc6a89ef82d5e3d5ecf499ce2528a4.jpg" height=301" width="301" alt="gallerypost4" class="gallerypost4"/>
        <span class="media-icon"></span>
      </div>

      <div class="gallery-item" tabindex="0">
        <img src="css/34df7912cc9523864c87e7fa3b254161.jpg" height=301" width="301" alt="gallerypost5" class="gallerypost5"/>
        <span class="media-icon"></span>
      </div>

      <div class="gallery-item" tabindex="0">
        <img src="css/bd1ce539f2ac61a43bb278b275bb9a0b.jpg" height=301" width="301" alt="gallerypost6" class="gallerypost6"/>
        <span class="media-icon"></span>
      </div>
    </section>


  </div>
</div>
</body>
<script src="js/sidebar.js"></script>
</html>

Вот мой код. Помимо этого - вот видео того, как это выглядит. - https://www.youtube.com/watch?v=swgsiTVt1E8

Так же скриншоты. -

БЛОГ НА HUSL

Как при уменьшении окна убрать текст и оставить иконки. Отзывчивый дизайн

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