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 */
}
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