showcar-ui/src/01-settings/docs/viewports.md

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<h2>Viewports<span class="status approved">Approved</span></h2>

All responsive elements that are based on media queries use the following breakpoints:

<table class="docs-table">
    <thead>
    <tr>
        <th>variable</th>
        <th>value</th>
        <th>size, from/to</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>$viewportS</td>
        <td>321px</td>
        <td>321px - 767px</td>
    </tr>
    <tr>
        <td>$viewportM</td>
        <td>768px</td>
        <td>768px - 1023px</td>
    </tr>
    <tr>
        <td>$viewportL</td>
        <td>1024px</td>
        <td>1024px - 1099px</td>
    </tr>
    <tr>
        <td>$viewportXL</td>
        <td>1100px</td>
        <td>1100px - 1269px</td>
    </tr>
    <tr>
        <td>$viewportXXL</td>
        <td>1270px</td>
        <td>1270px - ∞</td>
    </tr>
    </tbody>
</table>