Navbar fuori schermo mobile in versione desktop

[salvatore1970]

Ciao a tutti. Sono nuovo e vi chiedo aiuto perché sto letteralmente impazzendo da una settimana per risolvere questo problema. Ho creato su piattaforma Blogger un sito con un template responsive, almeno dovrebbe essere responsive, tutto perfetto tranne che non so come risolvere il problema della navbar che esce fuori schermo nella versione desktop vista su smartphone. Vi allego l'immagine di esempio. Mi auguro che sia chiaro l'esempio. Grazie per il gentile aiuto.

 

[otto9due]

Si può avere un link per dare unocchiata? Anche in privato, così è difficile.

 

[salvatore1970]

Si può avere un link per dare unocchiata? Anche in privato, così è difficile.

Si, lo mando in pvt. Grazie per la gentilezza

 

[otto9due]

Credo che il problema possa essere nella media query utilizzata:

@media only screen and (max-width: 768px) {
#main-nav {
width: 483px ;
}}

In questo modo stai impostando una larghezza specifica sotto quella risoluzione, ma non è consigliabile, perchè su schermi più piccoli fa quel problema li.

Potresti provare con width: 100%;

 

[salvatore1970]

Credo che il problema possa essere nella media query utilizzata:

@media only screen and (max-width: 768px) {
#main-nav {
width: 483px ;
}}

In questo modo stai impostando una larghezza specifica sotto quella risoluzione, ma non è consigliabile, perchè su schermi più piccoli fa quel problema li.

Potresti provare con width: 100%;

Salve. Innanzitutto grazie, ma grazie davvero, perché sei riuscito ad individuare dove è situato il problema. Stavo letteralmente impazzendo. Allora, ho modificato i parametri al 100% ma il problema diventa più grande, nel senso che aumentano le di mensioni della barra, ergo la navbar si allarga di più. Ho provato a diminuire le percentuali al 60%, 40% e 30% ma resta sempre larga come al 100%. Per cui devo solo impostare in misura di px ma non riesco a trovare le dimensioni giuste.
Anche se lo hai già visto, riporto di seguito tutto il codice che da problemi, così che lo possano vedere anche gli altri:
_______________________________________________________________________

#slider {
overflow: hidden;
          width: 100%;}


       #bottombar .center,#bottombar .center1,#bottombar .right, #bottombar .left{width:50%}
      }
      @media only screen and ([B][COLOR=rgb(243, 121, 52)]max-width:768px[/COLOR][/B]){

.top-comment-widget-menu {

          height: 56px;}

.top-comment {
          width: 40%;}
#beakingnews {

width: 94.2%;
}
      
.container, #outer-wrapper {
width: 440px;
}
#main-nav{
[B][COLOR=rgb(243, 121, 52)]width: 483px[/COLOR][/B];
}
        #menu-main {
          display: none;
        }

_______________________________________________________________________

Ho messo in grassetto arancione i due parametri da te indicati.
Comunque devo cercare di impostare i parametri giusti. Altrimenti quale potrebbe essere un'altra soluzione?

 

[salvatore1970]

#bottombar .center,#bottombar .center1,#bottombar .right, #bottombar .left{width:50%}
      }
      @media only screen and (max-width:768px){

.top-comment-widget-menu {

          height: 56px;}

.top-comment {
          width: 40%;}
#beakingnews {

width: 94.2%;
}
     
.container, #outer-wrapper {
width: 440px;
}
#main-nav{
width: 483px;
}
        #menu-main {
          display: none;
        }

L'ho riscritto, non avevo considerato che il colore arancione non uscisse essendo un codice

 

[salvatore1970]

Comunque modificando

width: 468

con width: 100% , la navbar si riduce.

Ora il problema lo da

@media only screen and (max-width:768px)

che non so con quale parametro modificare perché 100% mi allunga di nuovo la barra del menù e 768 mi lascia lo spazio bianco

 

[jdigital.it]

Ciao se mi mandi, anche in privato il link ti aiuto a sistemare al volo

Inviato dal mio IN2023 utilizzando Tapatalk

 

[salvatore1970]

Ciao se mi mandi, anche in privato il link ti aiuto a sistemare al volo

Inviato dal mio IN2023 utilizzando Tapatalk

Inviato. Grazie mille

 

[salvatore1970]

Ragazzi, finalmente ho risolto!!!
Mancava un attributo CSS, questo:

}
li{margin:.5em 0
}

tra

ul{list-style:disc outside
}
li{margin:.5em 0
}
dt{font-weight:bold
}
dd{margin:0 0 .5em 2em
}

Grazie mille comunque per l'aiuto