Breakpoints

Developers can leverage base.breakpoints in Mojo to create responsive web apps that adjust effortlessly across various screen sizes and devices.

Mojo's default breakpoints:

BreakpointDescriptionTypeDefault Font Size (1rem)Max Width
defaultDefault configuration for base properties.object14px
smSmall screens (min-width: 576px).object14px576px
mdMedium screens (min-width: 768px).object14px768px
lgLarge screens (min-width: 992px).object14px992px
xlExtra-large screens (min-width: 1200px).object16px1200px
xxlExtra-extra-large screens (min-width: 1600px).object20px1500px

Each defined breakpoint within this configuration provides a comprehensive set of properties, allowing developers to tailor their web applications for specific screen sizes and devices. You can use these properties in each breakpoint.

PropertyDescriptionType
maxMaximum breakpoint size (optional).string
minMinimum breakpoint size.string
fontSizeFont size of the <html> element (size = 1rem)string
containerContainer properties at the breakpoint.object
- maxWidthMaximum container width.string
- paddingContainer padding.string

Examples

Adds a new breakpoint for the tablets:



  mojo({
    base: {
      breakpoints: {
        tablet: {
          min: "576px",
          max: "992px",
          fontSize: "15px",
          container: {
            maxWidth: "700px"
            padding: "0 1.25rem"
          }
        }
      },
    },
  });