Full Bleed CMS Content

By default, Hyvä applies a container class to all pages for a consistent layout. Sometimes, you'll want to break free from this container for a full-width experience.

Below are several methods to achieve this.

Method 1: Leveraging the Page Builder

The Magento Page Builder offers a straightforward way to create full-width CMS content.

Simply set the page layout to "Page -- Full Width" and use the Page Builder "Row" block for structured content sections.

Method 2: The CSS Full Bleed methods

For CSS methods, first install the CMS Tailwind JIT module.

This module enables the application of Tailwind classes directly from CMS content.

Viewport Full Bleed Technique

Ensure the parent element of the full-width content (typically .page-main or body) has overflow: hidden.

Apply these classes to your element for full bleed:

ml-[50%] w-screen -translate-x-1/2

Border Image Technique

Use this border-image technique for full bleed:

[border-image:conic-gradient(theme(colors.blue.400)_0_0)_fill_0//0_100vw]

This border-image uses a trick to create a solid color, as border-image doesn't directly support them.

Replace theme(colors.blue.400) with your desired color.

This method avoids the horizontal scrollbars seen with the Viewport Full Bleed technique.

Border images also allow for more creative patterns than solid colors.

Method 3: CSS Grid Method

This method modifies how the main page layout's .columns container is handled.

It requires more CSS adjustments and assumes CSS Grid proficiency.

.cms-page-view .columns {
    /* Unset the container */
    max-width: 100%;
    padding-inline: 0;
    margin-inline: 0;

    /* Apply grid based container on the main content wrapper */
    & .main {
        --max-width: var(--container-sm);
        --padding: --spacing(6);
        display: grid;
        grid-template-columns:
            1fr
            min((var(--max-width) - (var(--padding) * 2)), calc(100% - (var(--padding) * 2)))
            1fr;
        column-gap: var(--padding);

        @screen md {
            --max-width: var(--container-md);
        }

        @screen lg {
            --max-width: var(--container-lg);
        }

        @screen xl {
            --max-width: var(--container-xl);
        }

        @screen 2xl {
            --max-width: var(--container-2xl);
        }

        & > * {
            grid-column-start: 2;
        }

        /* If the content needs to escape use full */
        & .fullbleed {
            width: 100%;
            grid-column: 1 / -1;
        }
    }
}

Carefully test and refine your CSS to achieve the desired full-width effect while maintaining page structure and responsiveness.