Adaptivity in m.css ver.1.2

Adjusting m.css to fit screen sizes (adaptability) has several Media Break Points:

• large (.lg-* > 1280px),
  
• medium (768px < .md-* < 1280px),
  
• small (480px < .sm-* < 768px),
  
• extra-small (.xs-* < 480px).

Try slowly changing the width of the screen, say up to 1400px, up to 1024px, up to 600px, up to 420px

Use the Developer Console to see how it\'s done.

Below are some sets of classes for implementing screen-width adaptability.

Large screen size .lg-* (from 1280px wide and more)

Middle screen size .md-* (from 768px to 1280px wide)

Small screen size .sm-* (from 480px to 768px wide)

Extra small screen size .xs-* (up to 480px wide)

Using multiple classes at once can change the number of items in rows, depending on the screen width. For example, article thumbnails on this site have several classes:

class="w33 md-w33 sm-w50"

resulting in large and medium screens are per 3pcs each in a row (their width is 33.333%) and in small - already 2 (width 50%). On very small screens, these blocks automatically become 100% wide, so it makes no sense to specify an additional xs-w100 class.

Post your questions and comments in the form below.