escaping the wrapper

Hey, is there a way to escape a wrapper on one side without using grid? I'm aware Kevin has made a video on this where he creates a grid with columns that mimics padding etc however if you weren't utilizing grid and using a simple, generic wrapper class that looks something like:
.wrapper {
--padding: 1.5em;

width: min(calc(90vw - var(--padding)), 1200px);
margin-inline: auto;
}
.wrapper {
--padding: 1.5em;

width: min(calc(90vw - var(--padding)), 1200px);
margin-inline: auto;
}
would there be a way to allow one side to overflow the gutter that could easily be implemented into an exception class e.g. <div class="wrapper wrapper--break"></div>? Thanks in advance
14 Replies
reddogg476
reddogg4767mo ago
Kevin Powell
YouTube
How to escape the container on only one side
🎓 If you’ve been writing CSS for awhile now but you’re having trouble making that next step up with is, you might be interested in my course CSS Demystified: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=full-width-one-side Having something be full-width on a website isn't hard, and there are even some neat t...
reddogg476
reddogg4767mo ago
/* make sure text doesn't touch the edge of the viewport
and the content is vertically centered */
.full-width-split-screen > :not(img) {
display: grid;
align-content: center;
justify-items: start;
}
/* make sure text doesn't touch the edge of the viewport
and the content is vertically centered */
.full-width-split-screen > :not(img) {
display: grid;
align-content: center;
justify-items: start;
}
snxxwyy
snxxwyy7mo ago
it is indeed that one, and thank you for your help, however i was asking if there was a way to do it without using grid.
reddogg476
reddogg4767mo ago
the section.class doesn't have to be grid. so '.full-width-split-screen > :not(img)' can be flex the images need resized, like in his codepen. flex looks like it will work
reddogg476
reddogg4767mo ago
^ replace CSS for playing
snxxwyy
snxxwyy7mo ago
i'm not sure if i'm misunderstanding what you mean so apologies if i am. but this to me looks like it just aligns the content in the center of the image. That's not quite what i'm trying to achieve. The way he is escaping the wrapper (getting one side of the content to touch the edge of the viewport whilst the other is still aligned with the rest of the pages content) is by using grid as he can set his content to overlap into his gutter by using grid-column. The foundation of it is using grid which is this section:
.full-width-split-screen {
display: grid;
grid-template-columns:
minmax(var(--wrapper-padding-inline), 1fr)
minmax(0, calc(var(--wrapper-max-width) / 2))
minmax(0, calc(var(--wrapper-max-width) / 2))
minmax(var(--wrapper-padding-inline), 1fr);
}
.full-width-split-screen {
display: grid;
grid-template-columns:
minmax(var(--wrapper-padding-inline), 1fr)
minmax(0, calc(var(--wrapper-max-width) / 2))
minmax(0, calc(var(--wrapper-max-width) / 2))
minmax(var(--wrapper-padding-inline), 1fr);
}
The portion of code i provided in my original question is another way of creating a wrapper, however since it doesn't utilize grid, i can't use grid-column to allow my content to pass into the gutter. I was asking if i could break out of the wrapper using that method without having to use a wrapper using grid.
reddogg476
reddogg4767mo ago
/* ensure the image fill up the entire space available */ .full-width-split-screen > img { width: min(calc(50vw - 1.5rem), 100vw); height: auto; object-fit: cover; } that's not the wrapper, it's the breakout class (full width) using the same calc. the section will max to 100 viewport height, not 1200px like your code.
reddogg476
reddogg4767mo ago
looks like a good start. i've not checked responsiveness
No description
reddogg476
reddogg4767mo ago
it's not too wide. image is on the left
reddogg476
reddogg4767mo ago
two images is flexing, too:
No description
reddogg476
reddogg4767mo ago
i broke the middle sections but it looks like good bones
snxxwyy
snxxwyy7mo ago
alright, thank you, i'll play around with it.
Want results from more Discord servers?
Add your server