Отзывчивый выпаданий CSS NAVBAR не будет переключаться на мобильные и продукты. Не завершаются [закрыто] ⇐ Html

[Anonymous]

Я строю простую страницу «Shop» с отзывчивым Navbar и сеткой карт продукта. На рабочем столе это работает нормально, но у меня есть две проблемы на маленьких экранах: < /p>
Выпадающий в навигацию: < /p>
Я скрываю три звена верхних уровней (.navbar a) под 400 px и показываю кнопку. {Display: Block; Ширина: 160px;. < /p>
На узких просмотрах они переполняют контейнер вместо обертывания или укладки. Какие изменения мне нужно внести так, чтобы:
Выпадающее меню будет надежно откроется/закрывается на сенсорных устройствах (в идеале без Javascript)? /> переполнение: hidden;
фоновое цветное: orangered;
font-family: arial;
} < /p>
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
display: none;
}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}

body {
background-color: white;
}

.fejlec {
height: 21vh;
color: black;
}

.fejlec p {
color: white;
font-weight: 500;
font-size: 50px;
padding-top: 35px;
margin-left: 500px;
text-align: justify;
text-wrap: inherit;
}

.doboz1,.doboz2,.doboz3,.doboz4,.doboz5,.doboz6 {
background-color: orange;
width: 160px;
height: 40vh;
margin-left: 60px;
margin-top: 30px;
display: inline-block;
border: black solid 2px;
}

.container {
background-color: brown;
}

img {
width: 160px;
height: 150px;
}

.Leírás1,.Leírás2,.Leírás3,.Leírás4,.Leírás5,.Leírás6 {
font-size: 35px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 500;
display: inline;
}

.szoveg1,.szoveg2,.szoveg3,.szoveg4,.szoveg5,.szoveg6 {
color: white;
text-decoration: none;
font-size: 15px;
font-weight: 300;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: orange;
}

@media only screen and (max-width: 900px) {
.fejlec p {
color: white;
font-weight: 500;
font-size: 50px;
padding-top: 35px;
margin-left: 150px;
text-align: justify;
text-wrap: inherit;
}
.doboz1,.doboz2,.doboz3,.doboz4,.doboz5,.doboz6 {
background-color: orange;
width: 210px;
height: 60vh;
margin-left: 60px;
margin-top: 30px;
display: inline-block;
border: black solid 2px;
}
img {
width: 210px;
height: 150px;
}
}

@media only screen and (max-width: 400px) {
.fejlec p {
color: white;
font-weight: 500;
font-size: 50px;
padding-top: 35px;
margin-left: 80px;
text-align: justify;
text-wrap: inherit;
}
.dropdown {
display: block;
}
.navbar .elso,.masodik,.harmadik {
display: none;
}
.doboz1,.doboz2,.doboz3,.doboz4,.doboz5,.doboz6 {
background-color: orange;
width: 210px;
height: 60vh;
margin-left: 60px;
margin-top: 30px;
display: inline-block;
border: black solid 2px;
}
img {
width: 210px;
height: 150px;
}
}

@media only screen and (max-width: 500px) {
.fejlec p {
color: white;
font-weight: 500;
font-size: 40px;
padding-top: 35px;
margin-left: 80px;
text-align: justify;
text-wrap: inherit;
}
.dropdown {
display: block;
}
.navbar .elso,.masodik,.harmadik {
display: none;
}
.doboz1,.doboz2,.doboz3,.doboz4,.doboz5,.doboz6 {
background-color: orange;
width: 210px;
height: 60vh;
margin-left: 60px;
margin-top: 30px;
display: inline-block;
border: black solid 2px;
}
img {
width: 210px;
height: 150px;
}
}

@media only screen and (max-width: 300px) {
.fejlec p {
color: white;
font-weight: 500;
font-size: 30px;
text-align: justify;
text-wrap: inherit;
}
.dropdown {
display: block;
}
.navbar .elso,.masodik,.harmadik {
display: none;
}
.doboz1,.doboz2,.doboz3,.doboz4,.doboz5,.doboz6 {
background-color: orange;
width: 150px;
height: 60vh;
margin-left: 60px;
margin-top: 30px;
display: inline-block;
border: black solid 2px;
}
img {
width: 150px;
height: 150px;
}
}

< /code>
html < /p>





Vizsga Feladat





Tablet Bolt

Készülékek
Rólunk
Elérhetőségeink

M



Készülékek
Rólunk
Elérhetőségeink





Leírás
Lorem ipsum dolor sit amet consectetur adipisicing elit.



Leírás
Lorem ipsum dolor sit amet consectetur adipisicing elit.



Leírás
Lorem ipsum dolor sit amet consectetur adipisicing elit.



Leírás
Lorem ipsum dolor sit amet consectetur adipisicing elit.



Leírás
Lorem ipsum dolor sit amet consectetur adipisicing elit.



Leírás
Lorem ipsum dolor sit amet consectetur adipisicing elit.







Подробнее здесь: https://stackoverflow.com/questions/796 ... don-t-wrap