W3.CSS Built-In Responsiveness






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



W3.CSS Built-In Responsiveness




❮ Previous
Next ❯


W3.CSS includes a responsive, mobile-first grid system to handle layout:







1/2




1/2







1/3




1/3




1/3







1/3




2/3












1/4




1/4




1/4




1/4







1/2




1/4




1/4







2/3




1/3












3/4




1/4







1/4




1/4




1/2







1/4




1/2




1/4












50px




rest







1/4




rest







100px




45px




rest

































































W3.CSS Responsive Classes


W3.CSS's grid system is responsive, and the columns will re-arrange automatically depending on the screen size:







































Class Description
w3-half Occupies 1/2 of the window (on medium and large screens)
w3-third Occupies 1/3 of the window (on medium and large screens)
w3-twothird Occupies 2/3 of the window (on medium and large screens)
w3-quarter Occupies 1/4 of the window (on medium and large screens)
w3-threequarter Occupies 3/4 of the window (on medium and large screens)
w3-rest Occupies the rest of the column width
w3-col Defines one column in a 12-column responsive grid
w3-mobile Adds mobile-first responsiveness to a cell (column).
Displays
elements as block elements on mobile devices.

The responsive classes above must be placed inside a w3-row
class (or w3-row-padding class) to be fully responsive.



















































Class Description
w3-row Container for responsive classes, with no padding
w3-row-padding Container for responsive classes, with 8px left and right
padding
w3-content Container for fixed size centered content
   
w3-hide-small Hides content on small screens (less than 601px)
w3-hide-medium Hides content on medium screens
w3-hide-large Hides content on large screens (larger than 992px)
   
l1 - l12 Responsive sizes for large screens
m1 - m12 Responsive sizes for medium screens
s1 - s12 Responsive sizes for small screens





<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




The w3-half Class


The width of the w3-half class is 1/2 of the parent element
(style="width:50%").


On screens smaller than 601 pixels it resizes to 100%.




w3-half




w3-half






Example



<div class="w3-row">
  <div class="w3-half w3-container w3-green">
   
<h2>w3-half</h2>
 
</div>
  <div class="w3-half w3-container">
   
<h2>w3-half</h2>
 
</div>
</div>

Try It Yourself »


The w3-third Class


The width of the w3-third class is 1/3 of the parent element
(style="width:33.33%").


On screens smaller than 601 pixels it resizes to 100%.





w3-third




w3-third




w3-third






Example



<div class="w3-row">
  <div class="w3-third w3-container w3-green">
   
<h2>w3-third</h2>
 
</div>
  <div class="w3-third w3-container">
   
<h2>w3-third</h2>
 
</div>
  <div class="w3-third w3-container">
   
<h2>w3-third</h2>
 
</div>
</div>

Try It Yourself »


The w3-twothird Class


The width of the w3-twothird class is 2/3 of the parent element
(style="width:66.66%").


On screens smaller than 601 pixels it resizes to 100%. 





w3-twothird




w3-third






Example



<div class="w3-row">
  <div class="w3-green w3-container
w3-twothird">
   
<h2>w3-twothird</h2>
 
</div>
  <div class="w3-container w3-third">
   
<h2>w3-third</h2>
 
</div>
</div>

Try It Yourself »


The w3-quarter Class


The width of the w3-quarter class is 1/4 of the parent element
(style="width:25%").


On screens smaller than 601 pixels it resizes to 100%.




w3-quarter




w3-quarter




w3-quarter




w3-quarter






Example



<div class="w3-row">
  <div class="w3-green w3-container
w3-quarter">
   
<h2>w3-quarter</h2>
 
</div>
  <div class="w3-container w3-quarter">
   
<h2>w3-quarter</h2>
 
</div>
  <div class="w3-container w3-quarter">
   
<h2>w3-quarter</h2>
 
</div>
  <div class="w3-container w3-quarter">
   
<h2>w3-quarter</h2>
 
</div>
</div>

Try It Yourself »


The w3-threequarter Class


The width of the w3-threequarter class is 3/4 of the parent element
(style="width:75%").


On screens smaller than 601 pixels it resizes to 100%.





w3-threequarter




w3-quarter






Example



<div class="w3-row">
  <div class="w3-green w3-container
w3-threequarter">
   
<h2>w3-threequarter</h2>
 
</div>
  <div class="w3-container w3-quarter">
   
<h2>w3-quarter</h2>
 
</div>
</div>

Try It Yourself »



Combinations





w3-quarter




w3-half




w3-quarter







w3-quarter




w3-quarter




w3-half







w3-half




w3-quarter




w3-quarter







w3-third




w3-twothird







w3-quarter




w3-threequarter





Nested Rows



Example: w3-half Inside w3-half



<div class="w3-row">
  <div class="w3-half w3-container">
   
<h2>w3-half</h2>
    <div class="w3-row">
     
<div class="w3-half w3-container w3-red">
       
<h2>w3-half</h2>
        <p>This is a
paragraph.</p>
      </div>
     
<div class="w3-half w3-container">
       
<h2>w3-half</h2>
        <p>This is a
paragraph.</p>
      </div>
   
</div>
  </div>
  <div class="w3-half w3-container">
   
<h2>w3-half</h2>
    <div class="w3-row">
     
<div class="w3-half w3-container w3-red">
       
<h2>w3-half</h2>
        <p>This is a
paragraph.</p>
      </div>
     
<div class="w3-half w3-container">
       
<h2>w3-half</h2>
        <p>This is a
paragraph.</p>
      </div>
   
</div>
  </div>
</div>

Try It Yourself »



Columns Using Rest


The w3-col class defines one column in a 12-column
responsive grid.


The w3-rest class will occupy the rest of the width:



I am 150px


I am the rest




Example



<div class="w3-row">
    <div class="w3-col" style="width:150px"><p>150px</p></div>
    <div class="w3-rest
w3-green"><p>rest</p></div>
</div>

Try It Yourself »



Columns Using Percent


You can also use the CSS width property to set the width in percent:



20%


60%


20%





Example



<div class="w3-row">
    <div class="w3-col"
style="width:20%"><p>20%</p></div>
    <div class="w3-col" style="width:60%"><p>60%</p></div>
    <div
class="w3-col" style="width:20%"><p>20%</p></div>
</div>

Try It Yourself »



The w3-content Class


The w3-content class defines a container for fixed size centered content. Use the CSS max-width property to override the default width (980px).



Example



<body class="w3-content" style="max-width:500px">

 
page content...

</body>

Try It Yourself »


w3-row vs. w3-row-padding


The w3-row class defines a container with no padding, while the
w3-row-padding class adds a 8px left and right padding to each column:



w3-row:




w3-third




w3-third




w3-third





w3-row-padding:




w3-third




w3-third




w3-third






w3-row:














w3-row-padding:














Example



<div class="w3-row">
  <div class="w3-third"><img src="img_lights.jpg"></div>
 
<div class="w3-third"><img src="img_nature.jpg"></div>
  <div class="w3-third"><img src="img_snowtops.jpg"></div>
</div>

<div class="w3-row-padding">
  <div class="w3-third"><img src="img_lights.jpg"></div>
 
<div class="w3-third"><img src="img_nature.jpg"></div>
  <div class="w3-third"><img src="img_snowtops.jpg"></div>
</div>

Try It Yourself »



Responsive Show / Hide


The w3-hide-small, w3-hide-medium, and
w3-hide-large classes hide elements on specific screen sizes.


Note: Resize the browser window to understand how it works:


w3-hide-small will be hidden on small screens (phones)


w3-hide-medium will be hidden on medium screens (tablets)


w3-hide-large will be hidden on large screens (laptops/desktop)




Example



<div class="w3-container w3-hide-small w3-red">
  <p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>

<div
class="w3-container w3-hide-medium w3-green">
  <p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>

<div
class="w3-container w3-hide-large w3-blue">
  <p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div>

Try It Yourself »


The w3-mobile Class


The w3-mobile class adds mobile-first responsiveness to any element.


It adds display:block and width:100% to an element on screens that are less than 600px wide.




Example



<a class="w3-button w3-mobile" href="#">Link</a>


Try It Yourself »


Screen Resolutions



The built-in responsiveness of W3.CSS uses the DP size of a screen.


W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels
DP.


Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.



Below is a list of typical device resolutions and reported DP sizes:




Iphone 4


Resolution
640 x 960


DP
320 x 480





Iphone 5


Resolution
640 x 1136


DP
320 x 528





Iphone 6


Resolution
750 x 1334


DP
375 x 667





Iphone 6s


Resolution
1080 x 1920


DP
414 x 736







Galaxy S6


Resolution
1440 x 2560


DP
360 x 640





Note 4


Resolution
1440 x 2560


DP
400 x 853





Nexus 6


Resolution
1440 x 2560


DP
411 x 731







iPad Mini


Resolution
768 x 1024


DP
768 x 1024





iPad


Resolution
1536 x 2048


DP
768 x 1024







Typical Laptop


Resolution
1366 x 768


DP
1366 x 768





Typical Desktop


Resolution
1920 x 1080


DP
1920 x 1080




12 Column Responsive Fluid Grid


W3.CSS also supports an advanced 12 column responsive fluid grid.


Resize the page to see the effect!





1

2

3

4

5

6

7

8

9

10

11

12





This part will occupy 12 columns on a small screen,
4 on a medium screen, and 3 on a large screen.




This part will occupy 12 columns on a small screen,
8 on a medium screen, and 9 on a large screen.






1

2

3

4

5

6

7

8

9

10

11

12




You will learn a lot more about the fluid grid in a later chapter.






❮ Previous
Next ❯

-

Popular posts from this blog

HTML5 Browser Support

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> HTML5 Browser Support ❮ Previous Next ❯ You can teach older browsers to handle HTML5 correctly. HTML5 Browser Support HTML5 is supported in all modern browsers. In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements. Because of this, you can "teach" older browsers to handle "unknown" HTML elements. You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements. Define Semantic Elements as Block Elements HTML5 defines eight new semantic elements. All these are block-level elements. To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block : header, section, footer, aside, nav, main, article, figure {     display: block; } Add New Elements to HTML You can also add new elements to an HTML page with a browser trick. This example adds a ne...
Read more

HTML Canvas Reference

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> HTML Canvas Reference ❮ Previous Next ❯ Description The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics. The getContext() method returns an object that provides methods and properties for drawing on the canvas. This reference will cover the properties and methods of the getContext("2d") object, which can be used to draw text, lines, boxes, circles, and more - on the canvas. Browser Support The numbers in the table specify the first browser version that fully supports the element. Element <canvas> 4.0 9.0 2.0 3.1 9.0 Internet Explorer 9, Firefox, Opera, Chrome, and Safari support <canv...
Read more

Google Hardware Icons

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Google Hardware Icons ❮ Previous Next ❯ Hardware Icons Below is a list of all Google Hardware icons: Icon Description Example cast cast Try it cast_connected cast_connected Try it computer computer Try it desktop_mac desktop_mac Try it desktop_windows desktop_windows Try it developer_board developer_board Try it device_hub device_hub Try it devices_other devices_other Try it dock dock Try it gamepad gamepad Try it headset headset Try it headset_mic headset_mic Try it keyboard keyboard Try it keyboard_arrow_down keyboard_arrow_down Try it keyboard_arrow_left keyboard_arrow_left Try it keyboard_arrow_right keyboard_arrow_right Try it keyboard_arrow_up keyboard_arrow_up ...
Read more