2 Deceptively Challenging Layouts

Video tutorial of a few layouts with tricks up their sleeve!

by

Layout 1

.overflow-hidden{
	overflow: hidden;
    }

.bg-offset-right {
	position: relative;
    }

.bg-offset-right:before{
	content: '';
	position: absolute; 
	z-index: 0;
	background-color: var(--accent); /* change this to the background color you want to use */ 
	width: 200vw;
	height: 100%;
	left: -50%;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
    }

@media (max-width: 768px) {
	.bg-offset-right:before{
		top: -30%;
		height: 130%
    }	
}

Layout 2

.half-container-width{
	max-width: 640px; /* change this to half of your container's width */ 
    }

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

1 thought on “2 Deceptively Challenging Layouts”

  1. Hey Kyle,

    thanks a lot for another great tutorial.

    I’ve tested that one:
    .half-container-width{
    max-width: 640px; /* change this to half of your container’s width */
    }

    When we want the text column to the left, we have to add “margin-left: auto”

    .half-container-width{
    max-width: 640px; /* change this to half of your container’s width */
    margin-left: auto;
    }

    Best regards,
    Manuel

    Reply

Leave a Comment