Media queries apply CSS only when a condition is true, such as the screen width, the orientation or the user preferences. They are the base of responsive design.

Mobile first approach

Write the base styles for small screens and use min-width to add styles as the screen gets larger.

css">.lotgrafix-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media ( min-width: 768px ) {
    .lotgrafix-cards {
        grid-template-columns: repeat( 2, 1fr );
    }
}

@media ( min-width: 1024px ) {
    .lotgrafix-cards {
        grid-template-columns: repeat( 3, 1fr );
    }
}

Common breakpoints

• 480px: small phones
• 768px: tablets
• 1024px: small laptops
• 1280px: desktops

Range syntax

Modern browsers support comparison operators, which are easier to read.

@media ( width >= 768px ) {
    .lotgrafix-sidebar { display: block; }
}

@media ( 480px <= width <= 1024px ) {
    .lotgrafix-sidebar { display: none; }
}

Orientation

@media ( orientation: landscape ) {
    .lotgrafix-hero { height: 100vh; }
}

Dark mode

@media ( prefers-color-scheme: dark ) {
    :root {
        --lotgrafix-bg: #111;
        --lotgrafix-text: #eee;
    }
}

Reduced motion

Respect users who prefer less animation.

@media ( prefers-reduced-motion: reduce ) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

Hover capable devices only

@media ( hover: hover ) {
    .lotgrafix-card:hover { transform: translateY( -4px ); }
}

Print styles

@media print {
    .lotgrafix-header,
    .lotgrafix-footer { display: none; }
}

Required meta tag

Make sure your theme includes the viewport meta tag inside the head.

<meta name="viewport" content="width=device-width, initial-scale=1">