Two modern habits that make layouts work on mobile browsers and in any language direction.

The 100vh problem on mobile

On phones the browser toolbar appears and disappears while scrolling, so 100vh can be taller than the visible area. The new viewport units solve it.

• svh: small viewport height, with the toolbars visible.
• lvh: large viewport height, with the toolbars hidden.
• dvh: dynamic viewport height, it updates as the toolbars change.

The same exist for width: svw, lvw and dvw.

Full screen hero section with a fallback

.lotgrafix-hero {
    min-height: 100vh;
    min-height: 100dvh;
}

Logical properties

Instead of left, right, top and bottom, logical properties follow the writing direction. Your layout works automatically in right-to-left languages like Arabic and Hebrew.

• margin-inline: left and right margins in left-to-right text.
• margin-block: top and bottom margins.
• padding-inline and padding-block: the same for padding.
• inline-size and block-size: replace width and height.
• inset-inline-start and inset-block-start: replace left and top.
• border-inline-start: replaces border-left.
• text-align: start and text-align: end: replace left and right.

Example

.lotgrafix-container {
    inline-size: min( 100% - 2rem, 1200px );
    margin-inline: auto;
    padding-block: 2rem;
}

.lotgrafix-quote {
    border-inline-start: 4px solid orangered;
    padding-inline-start: 1rem;
}

Shorthand for centering

.lotgrafix-center {
    display: grid;
    place-items: center;
}