Modena Documentation

Responsive Mode
Class GroupClass NameInstructions
Responsive ModeResponsiveMakes an element responsive using media queries. For example;
if screen width is smaller than 1200px and bigger than 960px, this element's width sets to '33%',
if screen width is smaller than 960px and bigger than 640px, this element's width sets to '50%',
if screen width smaller than 640px, this element's width sets to '100%'.
Thus, width of this element is adjusted to screen resolution on mobile phones and tablets.
Resize browser window to see changes of Green ContainerX boxes below.
Responsive50Makes an element responsive using media queries. For example;
if screen width is smaller than 1200px and bigger than 960px, this element's width sets to '50%',
if screen width is smaller than 960px, this element's width sets to '100%'
Responsive100Makes an element responsive using media queries. For example;
if screen width is smaller than 1200px, this element's width sets to '100%',
Responsive Element (With Container33 Class)
Responsive Element (With Container33 Class)
Responsive Element (With Container33 Class)
Responsive50 Element (With Container60 Class)
Responsive50 Element (With Container20 Class)
Responsive50 Element (With Container20 Class)
Responsive100 Element (With Container50 Class)
Responsive100 Element (With Container20 Class)
Responsive100 Element (With Container30 Class)

Some Components In Responsive Containers

DataList in Container50 Responsive50
  1. Audi, 1967
  2. Fiat, 1976
  3. Audi, 1974
  4. Mercedes, 1997
  5. Mercedes, 1967
  6. Volkswagen, 1962
  7. Volkswagen, 1960
  8. Jaguar, 1986
  9. Renault, 1976
  10. Jaguar, 1960
DataList - Paginator in Container50 Responsive50
  • BMW, 2004
  • Fiat, 1981
  • Volkswagen, 2008
  • Audi, 2001
  • Fiat, 1991
  • Mercedes, 1980
  • Ford, 1983
Car Info
Single TreeTable in Container60 Responsive100
NameSizeType
Checkbox TreeTable in Container40 Responsive100
NameSizeType
+1 888 123 4567
info@modenamodena.com