Responsive Design

Use responsive utility classes to create advanced layouts to better accommodate different screen sizes.

Responsive breakpoints allow you to create flexible and adaptable layouts for your web projects. These breakpoints provide fine-grained control over your layout’s behavior on different devices.

Here’s how breakpoints are defined:

$yma-breakpoints: (
  "sm": 640px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px,
  "xxl": 1536px,
);

Using breakpoints

Use responsive breakpoints such as sm:*, md:*, lg:*, xl:* and xxl:* to apply specific rules to different screen sizes. For example:

<div class="cnt mx-auto p-4">
  <div class="d-g g-4 gtc-1 lg:gtc-4 md:gtc-3 sm:gtc-2">
    <div>...</div>
  </div>

  <div class="d-g g-4 gtc-1 lg:gtc-4 md:gtc-3 sm:gtc-2">
    <div>...</div>
  </div>

  <div class="d-g g-4 gtc-1 lg:gtc-4 md:gtc-3 sm:gtc-2">
    <div>...</div>
  </div>

  <div class="d-g g-4 gtc-1 lg:gtc-4 md:gtc-3 sm:gtc-2">
    <div>...</div>
  </div>
</div>