Layout full width contrained

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Column 2

Implementation

HTML structure

-container
–col
—inner
–col

Just add “fw-hero” to the container.

All divs has to be “full width”!

Viewport width without the scrollbars trick!

https://stackoverflow.com/questions/33606565/is-it-possible-to-calculate-the-viewport-width-vw-without-scrollbar

							
					/*******************/
/***  FW HERO   ****/
/*******************/

.fw-hero {
    margin-bottom: var(--spacing-xl);
    padding: 0;
    gap: 0;

    >div {

        &:first-child {
            padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--section-padding);

            @include breakpoint(medium) {
                padding: var(--spacing-m) 0 var(--spacing-m) var(--section-padding);
                flex: 0 0 auto;
                width: calc((((100vw - (100vw - 100%)) - var(--max-width)) / 2) + ((var(--max-width) / 12) * 6));
            }

            > div { margin-left: auto; }

        }

        &:last-child {
            padding: var(--spacing-m) var(--section-padding) var(--spacing-m) var(--section-padding);
            display: flex;

            @include breakpoint(medium) {
                display: flex;
                padding: var(--spacing-m) var(--section-padding) var(--spacing-m) var(--spacing-m);
                margin-right: 0;
                margin-left: auto;
            }
            
            > div { margin-right: auto; }
        }

        // inner div max-width
        >div {
            margin-right: 0;
            padding: 0 var(--spacing-s) 0 0;

            @include breakpoint(medium) {
                max-width: calc((var(--max-width) / 12) * 6) !important;
            }
        }
    }
}
				
			
		

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Column 2

How to

Viewport width without the scrollbars trick!

https://stackoverflow.com/questions/33606565/is-it-possible-to-calculate-the-viewport-width-vw-without-scrollbar

							
					/************************/
/***  FW HERO 4 / 8  ****/
/************************/

.fw-hero.fw-hero--4\/8 {
    			
	> div {
        
		&:first-child {

			@include breakpoint(medium) {
				width: calc((((100vw - (100vw - 100%)) - var(--max-width)) / 2) + ((var(--max-width) / 12) * 4)); 
			}

			> div {
				@include breakpoint(medium) {
					max-width: calc((var(--max-width) / 12) * 4) !important;
				}
			}
		}
		&:last-child {
			padding: var(--spacing-m) var(--section-padding) var(--spacing-m) var(--section-padding);

			@include breakpoint(medium) {
				padding: var(--spacing-m) var(--section-padding) var(--spacing-m) var(--spacing-m);
				margin-right: 0;
				margin-left: auto;
				height: auto
			}
		}
	}
	
}
				
			
		