Css - Por que o menu não encolhe no celular?

Front-end
,
#1

o menu encolhe quando eu diminuo o navegador, porém tento acessar pelo celular e ele não encolhe.
estou utilizando bootstrap
imagem no pc

image
image.png502×528 28.5 KB

imagem no celular…
segue imagem…
f8beaf7e-4f93-4094-800e-c0d4b1298377
f8beaf7e-4f93-4094-800e-c0d4b1298377.jpg540×1110 42.7 KB

1 curtida
#2

Para isso recomendo que use o media queries do css, aqui um exemplo:

Vamos supor que eu tenho uma foto e quando reduzir o tamanho do meu site eu gostaria de diminuir a foto também:

Então eu digo ao CSS para que quando estiver na resolução X que altere meus elementos subscrevendo as propriedades deles de acordo com a resolução em que se encontra o navegador.

Aqui no caso para telas que possuem no máximo 992px de largura a imagem selecionada na propriedade CSS terá width de 100px.

@media screen and (max-width: 992px) {
  img {
    width: 100px;
  }
}

Aqui para saber mais e mais exemplos de uso do media queries do CSS:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

1 curtida
#3

Vc alterou o navegador para dispositivo móvel ou apenas diminuiu a janela?

#4

fiz os 2.
tbm acessei pelo celular.

#5

Como vc está usando as classes CSS para controlar a responsividade no seu código?

#6 
@media (max-width: 767px) {
    .main {
        margin-left: 0 !important;
        padding: 0 15px 15px 15px;
    }
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }

  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 7px;
    z-index: 10 !important;
    padding: 3px;
    width: 40px;
    text-align: center;
    background-color: #2e353d;
    border-radius: 4px;
  }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}

@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}
@media (max-width: 767px) {
    .hidden-xs {
        display: none!important
    }
}

@media (min-width: 992px)and (max-width: 1199px) {
    .hidden-md {
        display: none!important
    }
}
@media (min-width: 1200px) {
    .hidden-lg {
        display: none!important
    }
}
#7

Se vc está utilizando o bootstrap, pq mantem controle da responsividade manualmente? Basta seguir a documentação do grid system que a responsividade será feita pelas classes do bootstrap.

FONTE: https://getbootstrap.com/docs/4.1/layout/grid/

#8

vai dar muito trabalho modificar tudo, o sistema já está grande de mais.
vou deixar aqui o exemplo do menu, o menu do sistema foi baseado nele.app_dashboard.rar (5,1 KB)