title: How do I make semantic ui pages responsive?
body: <p>I am using semantic ui for developing web pages.
  I want them to be responsive. I tried to open web pages on my phone but the size of the grid changes to minimum and that doesn't look good.
  What changes should I do to my code ?</p>
  
  <pre><code>&lt;div class="ui six wide column
   segment" id="logBox"
   style="background-color: #F1F0FF;"&gt;
  
      &lt;div class="ui centered
                  header"&gt;&lt;h1&gt;Log-In to your 
      account&lt;/h1&gt;
                     &lt;/div&gt;
  
          &lt;form class="ui form"&gt;
              &lt;div class="field"&gt;
                  &lt;div class="ui left icon
                  input"&gt;
                  &lt;i class="user icon"&gt;&lt;/i&gt;
                  &lt;input type="text"
          placeholder="Email-id" &gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="field"&gt;
                  &lt;div class="ui left icon   
  
                       input"&gt;
                      &lt;i class="lock icon"&gt;&lt;/i&gt;
                      &lt;input type="password"     
  
              placeholder="Password"&gt;
  
  
  
             &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  @media only screen and (max-   
           width: 640px){
  
           #logBox{
              width:100%;
           }
         }
  </code></pre>