Container & Layout

A site’s container is the defined width its content sits within. Keeping that width consistent — and adapting it to each screen size — is what makes a layout feel balanced and readable, whether it’s viewed on a wide desktop monitor or a small phone.

Why the container matters

The container prevents content from stretching too wide (which makes long lines of text hard to follow) or squeezing too narrow (which cramps the design). A well-tuned container is central to responsive design: it keeps the layout organized and visually appealing across every device, which directly improves the reading experience and keeps visitors engaged.

Adjust the container

From your WordPress panel, go to Shock » Layout Container, adjust the width for the different screen sizes, and click Publish to save.

You’ll typically be able to set the content width independently for large desktops, tablets, and mobile — so each breakpoint gets a width that fits it.

The container you set here applies to the whole site. When editing a page in Elementor, you can still give an individual section its own width, and that override affects only that section — the global container stays in place everywhere else.

Comfortable line length reads best

For body-text pages, a container that keeps lines to roughly 50–75 characters is easiest to read. Full-width sections are great for heroes and galleries, but long paragraphs benefit from a contained width.

Note

Test your pages at several widths after changing the container. Resizing your browser window is a fast way to confirm the layout holds up from desktop down to mobile.

Once your layout width feels right, head to Change Your Site Colors or Change Your Site Typography to keep tuning the overall look.