Wie mache ich semantische UI-Seiten ansprechend?

Question

Ich verwende semantische ui für die Entwicklung von Webseiten. Ich möchte, dass sie reagieren. Ich habe versucht, Webseiten auf meinem Handy zu öffnen, aber die Größe des Rasters ändert sich auf ein Minimum und das sieht nicht gut aus. Welche Änderungen muss ich an meinem Code vornehmen?

<div class="ui six wide column 
segment" id="logBox" 
style="background-color: #F1F0FF;"> 

    <div class="ui centered 
       header"><h1>Log-In to your 
    account</h1> 
        </div> 

     <form class="ui form"> 
      <div class="field"> 
       <div class="ui left icon 
       input"> 
       <i class="user icon"></i> 
       <input type="text" 
     placeholder="Email-id" > 
       </div> 
      </div> 

      <div class="field"> 
       <div class="ui left icon 

        input"> 
        <i class="lock icon"></i> 
        <input type="password"  

      placeholder="Password"> 



      </div> 
      </div> 

CSS:

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

     #logBox{ 
      width:100%; 
     } 
     } 

Answer 1

würde ich nach einer gewissen Haltepunkt machen Elemente voller Breite und alle Schwimmer entfernen. Im Allgemeinen haben alle Ihre Gitterelemente eine gemeinsame Klasse, wie "ui" im obigen Fall, könnten Sie das wie folgt verwenden:

.ui { 
    display: block; 
    float: none; 
    width: auto; 
}