Медиа-запросы CSS Navbar — ⇐ CSS

[Anonymous]

Я дизайнер, сейчас работаю веб-разработчиком (обучился через YT, лол)
Работаю над навигационной панелью для одного из моих первых клиентов, пытаюсь сделать ее отзывчивой на небольших устройствах и ломаю голову, как это сделать управляйте шириной контейнера, уменьшая при этом его содержимое.
Код приведен ниже, и я прикрепил изображения того, как он должен выглядеть по ширине телефона. Он уже спроектирован и закодирован для ширины ноутбука.
Что лучше: изменить стиль кнопок в MQ или просто использовать MQ, чтобы уменьшить его в целом? [Laptop Size](https://i.sstatic.net/9QUXGRjK.png)
[Phone Size](https://i.sstatic.net/A25allk8.png)
[Inspector-1200px,Navbar gets cut off (?)](https://i.sstatic.net/4hziWXTL.png)
[Inspector- >1200px, navbar starts to lose buttons underneath the logo] (https://i.sstatic.net/pBvry3Qf.png)

HTML





alt="Alastair Smith Ceramics Brand logo and wordmark. Colour is Dark Chocolate."
/>

• 
  Home
• 
  About
• 
  Creative Process
• 
  Gallery
• 
  Contact
• 
  Shop

CSS
`your text`

/* --Start of NavBar styling */
.Nav-Link {
text-decoration: none;
}
.NavBar {
/*NavBar nav div*/
position: sticky;
top: 0;
height: 80px;
width: 100vw;
background-color: #ffecc0;
font-size: 32px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
row-gap: 8px;
margin: 0;
opacity: 100;
z-index: 10;
overflow-x: hidden;
}

@media screen and (max-width: 1200px) {
.NavBar {
width: 100vw;
font-size: 16px;
padding-top: 0.5rem;
row-gap: 4px;
height: fit-content;
}
}
/* Logo ofc */
.logo {
padding-left: 3rem;
padding-top: 0.5rem;
background-color: #ffecc0;
}
#logo > {
height: 80px;
}
.NavBarNav {
/*NavButtons container*/
background-color: #ffecc0;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: right;
align-items: right;
margin: 0%;
margin-top: 0%;
margin-right: 20px;

padding-inline-end: 0.5rem;
top: 0%;
position: sticky;
list-style: none;
width: 100vw;
gap: 8px;
z-index: 0;
}
@media screen and (max-width: 1200px) {
.NavBarNav {
padding: right 2rem;

gap: 0.5rem;
width: 100vw;
}
}
.NavBtn {
background-color: var(--cream-500);

text-align: center;
height: 59px;
width: max-content;
font-size: 12px;
padding: 10px;
border-radius: 8px;
color: #21100b;
border: #ffecc0;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

@media screen and (max-width: 1150) {
.NavBtn {
font-size: 8px;
padding: 1rem;
height: fit-content;
width: min-content;
}
}
/* NavBar Button animations */

.NavBtn:hover {
background-color: #b79860;
color: #21100b;
}

.NavBtn:focus,
.NavBtn:focus-within {
/*
Focus=within stops C700 being applied to whole navbar.
---TO DO
=fix pressed state*/
background-color: #93713d; /* Cream 700 */
color: #21100b;

border: #21100b;
border-width: 2px;
}

.Nav-Link {
padding: 10px;

font-size: 20px;
color: #21100b;
}

@media screen and (max-width: 1150px) {
.Nav-Link {
padding: 3px;
font-size: 10px;
}
}
/* --END of NavBar styling */



Подробнее здесь: https://stackoverflow.com/questions/792 ... ia-queries