Abnehmendes Browserfenster - Schaltflächensymbole enden nicht dort, wo sie sein sollten

Question

Um es einfach zu sagen, wenn Sie die Größe Ihres Browserfensters für die Mobilgeräteansicht verringern, werden die obersten Schaltflächen unter dem Namen des Clients nach links verschoben gelangt schließlich in einen Menüunterordner. Da ich kein Webdesigner bin, möchte ich, obwohl ich mich sehr anstrengen möchte, darauf achten, dass der Unterordner "Menü" viel früher reagiert, bevor die Schaltfläche unter dem Namen des Clients endet. Als freie Vorlage, die ich neu zu gestalten versuche, habe ich unter style.css und responsive.css nachgesehen, aber ich bin mir nicht sicher, wonach ich suchen sollte. Jede Hilfe in dieser Angelegenheit würde sehr geschätzt werden.

http://landonmusicgroup.com/victoria_update_test/index.html

Vielen Dank!

Answer 1

Ich würde kleinere Symbole im Allgemeinen mit weniger Polsterung auf der linken Seite vorschlagen. Dadurch werden kleinere Symbole erstellt, die näher beieinander liegen. Sie müssten den Browser wahrscheinlich skalieren, um sicherzustellen, dass die Symbole alle passen, bevor die Medienabfragen zu einer einzelnen Menüschaltfläche bei 767px brechen.

Die effizientere Option wäre, die Größe der Symbole und die Größe des Logos je nach Medienabfrage anzupassen. Zum Beispiel haben Sie eine Medienabfrage in dieser Vorlage von etwa 980px bis 1300px. Wenn möglich, passen Sie in Ihrer Vorlage die Größe des Logos und die Symbolgröße an, um sicherzustellen, dass in diesem Bereich alles passt.

Wenn Sie die größeren Symbole mögen, ist das in Ordnung, Sie müssen nur sicherstellen, dass die größeren Symbole und das Logo nicht wirksam werden, bis das Fenster über 1300px ist. Alles zwischen 980px und 1300px erfordert kleinere Symbole, ein kleineres Logo oder eine neue Anordnung, um den Zeilenumbruch zu vermeiden.

//This section affects anything bigger than 480px 
    @media screen and (min-width: 480px) { 
     body { 
      //insert width and height 
     } 
    } 

//This section affects anything bigger than 767px 
    @media screen and (min-width: 767px) { 
     li { 
      //insert width and height 
     } 
    } 

//This section affects anything bigger than 980px 
    @media screen and (min-width: 980px) { 
     li { 
      //insert width and height 
     } 
    } 

//This section affects anything bigger than 1300px 
    @media screen and (min-width: 1300px) { 
     li { 
      //insert width and height 
     } 
    }