Responsive Navigation

Question

Ich versuche, meine Navigation ansprechend zu machen, ich habe keine Ahnung, wie, es will es so, dass es nicht in die nächste Zeile springt, ich weiß, dass das Padding dies verursacht und ich könnte dabei helfen Prozentsätze als Breite verwenden, aber das sieht hella hässlich aus.

Dies ist, wie die Seite auf normale Auflösung aussieht: http://imgur.com/a/YO7xh

Dies ist, wie es aussieht, wenn ich die Ansicht vergrößern .. (das ist, was ich nicht passieren soll): http://imgur.com/a/a3Siu

Was kann ich tun, um dies zu verhindern?

-Code für die Navigation:

.header-side .game { 
 
    float: right; 
 
} 
 

 
.header-side .selected { 
 
    color: #f7c22c; 
 
} 
 

 
.header-side .other { 
 
    float: left; 
 
} 
 

 
.bottom-header { 
 
    height: 115px; 
 
    border-bottom: 1px solid #343538; 
 
    display: flex; 
 
    color: #787878; 
 
    text-transform: uppercase; 
 
    font-size: 14px; 
 
} 
 

 
header { 
 
    width: 100%; 
 
} 
 

 
.top-header { 
 
    height: 45px; 
 
    border-bottom: 1px solid #343538; 
 
    width: 100%; 
 
} 
 

 
.header-side { 
 
    width: 45%; 
 
    height: 100%; 
 
} 
 

 
.header-middle { 
 
    width: 10%; 
 
    margin: auto; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.header-divider { 
 
    height: 60px; 
 
    text-align: center; 
 
    transform: rotate(45deg); 
 
    width: 60px; 
 
    margin: auto; 
 
    border: 1px solid #f7c22c; 
 
}

<header> 
 
    <div class="top-header"> 
 
    This is the top header! 
 
    </div> 
 
    <div class="bottom-header"> 
 
    <div class="header-side"> 
 
     <div class="nav-item game">skin upgrade</div> 
 
     <div class="nav-item game">skin royale</div> 
 
     <div class="nav-item game selected">skin crash</div> 
 
    </div> 
 
    <div class="header-middle"> 
 
     <div class="header-divider"> 
 
     </div> 
 
    </div> 
 
    <div class="header-side"> 
 
     <div class="nav-item other">deposit</div> 
 
     <div class="nav-item other">withdraw</div> 
 
     <div class="nav-item other">provably fair</div> 
 
    </div> 
 
    </div> 
 
</header>

Answer 1

Ausprobieren Verwenden Medienabfrage in CSS wie folgt aus:

@media screen and (max-width: 768px) { 
    element {padding: 0;} 
} 

Also, wenn die die Auflösung in 768px bekommen, wird es entfernen die Polsterung des Elements.

Answer 2

Nun, Sie könnten https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Oder Sie könnten mit Prozent gehen. Schließlich würde eine Desktop-Webseite in einem 420p-Bildschirm nicht besser aussehen. Ich würde vorschlagen, mit etwas mehr "niedriger Auflösung", wie einem mobilen Design, zu gehen, so dass Medienabfragen ist wahrscheinlich das Beste, was Sie tun können.

EDIT: https://www.w3schools.com/css/css_rwd_mediaqueries.asp Das ist, was Sie wollen.