W3CSS Responsive

Now a days, people use internet on devices of varying sizes and resolutions. With the advent of tablets and phones of different sizes, web developers have to pay particular attention to how website looks on all of these devices. This is where concept of responsiveness comes to play. A responsive website is the one which adjusts itself to changing size of the screen. For instance a website may display its full menu on large screen, where on small screen it displays a menu button which when clicked displays menu. W3CSS Responsive classes help create responsive website. In this article and some of the next articles we shall study W3CSS Reponsive classes

W3CSS Responsive Classes

Following is the list of W3CSS responsive classes:

  • w3-half: Used to cover half width of the window
  • w3-third: Used to cover 1/3 of the window
  • w3-twothird: Covers 2/3 of the window
  • w3-quarter: Covers 1/4 of the window
  • w3-threequarter: Covers 3/4 of the widrth window
  • w3-rest: Covers rest of the width of the window
  • w3-col: Defines the number of columns occupied in the 12 column system.
  • w3-mobile: Converts the element to block level on mobile devices.

All of the above classes must be placed in some container class in order to create responsive layouts. The container classes are as follows:

  • w3-row: Container for responsive classes with no padding
  • w3-row-padding: Container for responsive classes with 8 pixel padding on left and right
  • w3-content: This class is used to contain fixed centered content.
  • w3-hide-small: Used to hide the element on small screen
  • w3-hide-medium: Used to hide the element on medium screen
  • w3-hide-large: Used to hide the element on large screens
  • l1-l12: Responsive column size for large screens
  • m1-m12: Responsive column sizes for medium screens
  • s1-s12: Responsive column sizes for small screens

Now we know what are the classes that are used to create responsive layouts in W3CSS. From the next article onwards, we shall see these classes put to practical use. We shall create some amazing responsive layouts in the next article. Stay tuned!

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .