Трудности с отзывчивостью [закрыто] ⇐ Html

[Anonymous]

У меня проблемы с отзывчивостью целевой страницы. Это не очень хорошо адаптируется к мобильным устройствам. Я пересылаю свой style.css и html: < /p>
Проблемы: слайд и формы < /p>
Я работаю над меню «Адаптивная навигация», используя HTML и CSS, где меню должно упасть в кнопку Hamburger на меньших экранах. Система переключения (.close-menu), чтобы показать/скрыть меню с гамбургером (☰) и закрыть (×) иконка. Нажмите на метку. < /p>
Установите отображение: нет и отображение: блокируйте правильно, чтобы переключить видимость. < /p>
Убедитесь, что контент меню правильно с использованием гибки и оправдания: в центре. Элементы или исчезают. < /p>
Содержание меню неожиданно смещается или не по центру. Соответствующая часть CSS для мобильного меню: < /p>


.intro-content {
position: relative;
/* top: -8rem; */
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--gap);
min-height: 100vh;
}

.intro-text-content,
.intro-img {
display: flex;
flex-flow: column wrap;
justify-content: center;

}

.intro-img img,
.intro-img svg {
max-width: 100%;
height: auto;
}

.top3-content {
max-width: 64rem;
display: flex;
/* flex-flow: column nowrap; */
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
min-height: 100vh;
text-align: center;
}

.grid-one-content {
display: flex;
flex-flow: column wrap;
justify-content: center;
min-height: 100vh;
}

.grid-main-heading {
margin-bottom: 1rem;
}

.grid-description {
padding-bottom: 5rem;
}

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
counter-reset: grid-counter;
}

.grid h3 {
font-size: 3rem;
position: relative;
padding-left: 5rem;
padding-bottom: 2rem;
}

.grid h3::before {
counter-increment: grid-counter;
content: counter(grid-counter);
position: absolute;
font-size: 8rem;
font-style: italic;
top: -4rem;
left: -2rem;
transform: rotate(5deg);
}

.gallery-img {
width: 100%;
max-width: 36rem;
max-height: 36rem;
overflow: hidden;
}

.gallery-img img {
transition: all 300ms ease-in-out;
}

.gallery-img img:hover {
transform: translate(-3%, 3%) scale(1.2) rotate(5deg);
}

.contact-form {
grid-column: span 2;
}

.contact-form .form-grid {
border: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--gap);
}

.form-grid legend {
font-style: italic;
font-size: 1.6rem;
margin-bottom: 3rem;
}

.form-group {
min-width: 32rem;
flex: 1 1 auto;
}

.form-group label {
display: block;
margin-bottom: 1rem;
}

.form-group input,
.form-group textarea {
border: none;
background: var(--white-color);
padding: 1.5rem 2rem;
width: 100%;
font-size: 3rem;
outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
box-shadow: 0 0 10px 2px var(--light-gray-color);
}

.form-group button {
border: 0.5rem solid var(--white-color);
background: var(--primary-color);
color: var(--white-color);
padding: 1.5rem 2rem;
font-size: 3rem;
cursor: pointer;
transition: all 300ms ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 0.5rem;
}

.form-group button:hover {
border: 0.5rem solid var(--white-color);
background: var(--primary-color-checked);
color: var(--white-color);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
transform: scale(1.05);
}

.form-group ::placeholder {
color: var(--light-gray-color);
}

.footer {
text-align: center;
font-size: 1.6rem;
}

.footer a {
color: var(--primary-color);
}

.footer p {
margin: 0;
padding: 3rem;
}

.close-menu {
display: none;
}

.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
background: var(--white-color);
width: 5rem;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color: var(--primary-color);
transform: rotate(-90deg);
border: 0.1rem solid var(--primary-color);
}

a:visited {
color: inherit;
/* Define a cor do link visitado */
text-decoration: none;
/* Remove a sublinha do link visitado, se necessário */
}

a:hover {
color: var(--menu-underline-color);
}

a:active {
color: blue;
}

/* table */

.responsive-table table {
width: 100%;
border-collapse: collapse;
font-family: inherit;
color: var(--white-color);
background-color: var(--primary-color);
}

.responsive-table th {
background-color: var(--primary-color-checked);
color: var(--white-color);
padding: 0.75rem 1rem;
text-align: left;
font-weight: bold;
}

.responsive-table td {
padding: 0.75rem 1rem;
border-top: 1px solid var(--primary-color-checked);
}

.responsive-table .text-end {
color: var(--primary-color);
text-align: right;
padding-right: 1rem;
background-color: var(--white-color);
}

.responsive-table caption {
color: var(--white-color);
font-weight: bold;
font-size: 1.2rem;
padding: 0.75rem 0;
}

/* mobile */
@media (max-width: 800px) {

.intro-content,
.grid {
grid-template-columns: 1fr;
}

.gallery-img {
width: 100%;
max-width: 100%;
max-height: 100%;
}

.gallery-img img {
width: 100%;
}

.grid-one-content {
display: block;
}

.menu {
bottom: 0;
text-align: center;
}

.menu-content,
.menu-content ul {
flex-direction: column;
justify-content: center;
}

.menu-content {
height: 100vh;
}

.menu {
display: none;
}

.close-menu-label::after {
content: '☰';
position: fixed;
z-index: 2;
top: 2rem;
right: 2rem;
background: var(--primary-color);
color: var(--white-color);
font-size: 3rem;
line-height: 3rem;
width: 3rem;
height: 3rem;
text-align: center;
padding: 0.5rem;
cursor: pointer;
}

.close-menu:checked~.menu {
display: block;
}

.close-menu:checked~.close-menu-label::after {
display: block;
content: '×';
}

.menu-spacing {
display: none;
}

h1 {
font-size: 4rem;
}

h2 {
font-size: 3.6rem;
}

h3 {
font-size: 3.4rem;
}

h4 {
font-size: 3.2rem;
}

h5 {
font-size: 3rem;
}

h6 {
font-size: 2.8rem;
}
}

/* fechando o bloco mobile */

/* SLIDE SHOW */
.slider {
margin: 0 auto;
width: 800px;
height: 400px;
overflow: hidden;
}

.slider {
border: 0px solid var(--white-color);
box-shadow: 0px 0px 15px 5px var(--white-color);
transition: 0.5s ease-in-out, border 0.5s ease-in-out;
/* Especifica a transição para a sombra e borda */
}

.slider:hover {
box-shadow: 0px 0px 25px 10px var(--white-color);
/* Aumenta o brilho da sombra no hover */
}

.slides {
width: 400%;
height: 400px;
display: flex;
;
}

.slides input {
display: none;
}

.slide {
width: 25%;
position: relative;
transition: 2s
}

.slide img {
width: 800px;
}

.manual-navigation {
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}

.manual-btn {
border: 2px solid var(--menu-underline-color);
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 0.8s;
background-color: var(--white-color);
}

.manual-btn:not(:last-child) {
margin-right: 40px;
}

.manual-btn:hover {
background: var(--primary-color);
}

#radio1:checked~.first {
margin-left: 0;
}

#radio2:checked~.first {
margin-left: -25%;
}

#radio3:checked~.first {
margin-left: -50%;
}

#radio4:checked~.first {
margin-left: -75%;
}

#radio5:checked~.first {
margin-left: -100%;
}

#radio6:checked~.first {
margin-left: -125%;
}

.navigation-auto div {
border: 2px solid var(--menu-underline-color);
padding: 5px;
border-radius: 10px;
cursor: pointer;
transition: 1s;
}

.navigation-auto {
position: absolute;
width: 800px;
margin-top: 360px;
display: flex;
justify-content: center;
}

.navigation-auto div:not(:last-child) {
margin-right: 40px;
}

#radio1:checked~.navigation-auto .auto-btn1 {
background: var(--white-color);
}

#radio2:checked~.navigation-auto .auto-btn2 {
background: var(--white-color);
}

#radio3:checked~.navigation-auto .auto-btn3 {
background: var(--white-color);
}

#radio4:checked~.navigation-auto .auto-btn4 {
background: var(--white-color);
}

#radio5:checked~.navigation-auto .auto-btn5 {
background: var(--white-color);
}

#radio6:checked~.navigation-auto .auto-btn6 {
background: var(--white-color);
}

/* Para telas pequenas, como tablets */
@media (max-width: 768px) {
.slider {
width: 100%;
height: auto;
overflow: hidden;
}

.slides {
display: flex;
width: 600%;
height: auto;
transition: margin-left 0.5s ease-in-out;
}

.slide {
width: 16.6667%;
/* Cada slide ocupa 1/6 do total */
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}

.slide img {
width: 100%;
height: auto;
object-fit: cover;
}

.manual-navigation,
.navigation-auto {
width: 100%;
position: relative;
}

.manual-btn {
padding: 6px;
margin-right: 10px;
}

#radio1:checked~.first {
margin-left: 0;
}

#radio2:checked~.first {
margin-left: -16.7%;
}

#radio3:checked~.first {
margin-left: -33.4%;
}

#radio4:checked~.first {
margin-left: -50%;
}

#radio5:checked~.first {
margin-left: -66.7%;
}

#radio6:checked~.first {
margin-left: -83.3%;
}
}

/* Para celulares menores que 480px */
@media (max-width: 480px) {
.slider {
width: 100%;
height: auto;
overflow: hidden;
}

.slides {
display: flex;
width: 600%;
/* ou 400% dependendo do número de slides */
transition: margin-left 0.8s ease-in-out;
}

.slide {
width: 50%;
/* Ajustado para 2 slides por vez em telas menores */
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}

.slide img {
width: 100%;
height: auto;
object-fit: contain;
border-radius: 0.5rem;
}

.slider,
.slide img {
max-width: 100%;
overflow: hidden;
}

.slider-container {
max-width: 800px;
width: 100%;
margin: 0 auto;
position: relative;
aspect-ratio: 16 / 9;
/* Mantém proporção em qualquer tela */
}

.manual-navigation,
.navigation-auto {
width: 100%;
position: relative;
}

.navigation-auto div {
opacity: 0.5;
background: transparent;
}

#radio1:checked~.navigation-auto .auto-btn1,
#radio2:checked~.navigation-auto .auto-btn2,
#radio3:checked~.navigation-auto .auto-btn3,
#radio4:checked~.navigation-auto .auto-btn4,
#radio5:checked~.navigation-auto .auto-btn5,
#radio6:checked~.navigation-auto .auto-btn6 {
background: var(--menu-underline-color);
opacity: 1;
}

.manual-btn {
border: 2px solid var(--menu-underline-color);
padding: 6px;
border-radius: 50%;
cursor: pointer;
background: transparent;
transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.manual-btn:hover {
background-color: var(--menu-underline-color);
transform: scale(1.1);
}

#radio1:checked~.first {
margin-left: 0;
}

#radio2:checked~.first {
margin-left: -50%;
}

#radio3:checked~.first {
margin-left: -100%;
}

#radio4:checked~.first {
margin-left: -150%;
}

#radio5:checked~.first {
margin-left: -200%;
}

#radio6:checked~.first {
margin-left: -250%;
}
}

/* Para celulares muito pequenos, como 320px */
@media (max-width: 320px) {
.slider {
width: 100%;
height: auto;
overflow: hidden;
}

.slides {
display: flex;
width: 600%;
height: auto;
transition: margin-left 0.5s ease-in-out;
}

.slide {
width: 100%;
/* Apenas 1 slide por vez */
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}

.slide img {
width: 100%;
height: auto;
object-fit: cover;
}

.manual-navigation,
.navigation-auto {
width: 100%;
position: relative;
}

.manual-btn {
padding: 4px;
margin-right: 3px;
}

#radio1:checked~.first {
margin-left: 0;
}

#radio2:checked~.first {
margin-left: -100%;
}

#radio3:checked~.first {
margin-left: -200%;
}

#radio4:checked~.first {
margin-left: -300%;
}

#radio5:checked~.first {
margin-left: -400%;
}

#radio6:checked~.first {
margin-left: -500%;
}
}< /code>
[*]

• Sobre mim
• Projetos
• Projetos Casuais
• Slide Show
• Meus Estudos
• Contato

Olá,
Me chamo Marcelo Magalhães, sou
formado em Análise e Desenvolvimento de Sistemas,
Pós Graduado em MBA - Inteligência Artificial e Big Data,
e também possuo Pós Graduação em Desenvolvimento Web Full
Stack. Também sou estudante de Engenharia de Software 5º
Semestre.






Feito com
muita dedicação por: Marcelo Magalhães



< /code>
< /div>
< /div>
< /p>
Я попытался добавить @media, и это не сработало. Я думаю, что изображения слишком большие для слайда, но я хотел, чтобы они адаптировались.

Подробнее здесь: https://stackoverflow.com/questions/797 ... onsiveness