Thursday, March 16, 2017

W3.CSS - Responsive Design

W3.CSS has several special classes to create a responsive design.
Class NameDescription
w3-halfSets the container to occupy 1/2nd of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%.
w3-thirdSets the container to occupy 1/3rd of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%.
w3-quarterSets the container to occupy 1/4th of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%.
w3-colSpecifies a column in a 12 column grid.
w3-rowSpecifies a padding-less container to be used for responsive classes. This class is mandatory for responsive classes to be fully responsive.

Example

w3css_responsive_design.htm
<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
   </head>
   <body> 
     
         <header class="w3-container w3-teal">   
            <h2>Mobile First Design Demo</h2>  
            <p class="w3-large">Resize the window to see the effect!</p>   
         </header>   
   <br/>
   <div class="w3-row w3-border">
            <div class="w3-container w3-half w3-red">
               <h2>w3-half</h2>  
               <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
            </div>
            <div class="w3-container w3-half">
               <h2>w3-half</h2>  
            </div>
          </div>          
        </div>   
        <br/>  
  <div class="w3-row w3-border">
            <div class="w3-container w3-third w3-red">
               <h2>w3-third</h2>  
               <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
            </div>
            <div class="w3-container w3-third">
               <h2>w3-third</h2>  
            </div>
          </div>          
        </div> 
        <br/>  
  <div class="w3-row w3-border">
            <div class="w3-container w3-quarter w3-red">
               <h2>w3-quarter</h2>  
               <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
            </div>
            <div class="w3-container w3-quarter">
               <h2>w3-quarter</h2>  
            </div>
          </div>          
        </div>  
   </body>
</html>

Result

Verify the result.

Mobile First Design Demo

Resize the window to see the effect!

w3-half

Sets the container to occupy 1/2nd of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.

w3-half


w3-third

Sets the container to occupy 1/3rd of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.

w3-third


w3-quarter

Sets the container to occupy 1/4th of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.

w3-quarter

Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)