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
R
reddogg47618d 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...
R
reddogg47618d 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;
}
S
snxxwyy18d 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.
R
reddogg47618d 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
R
reddogg47618d ago
R
reddogg47618d ago
^ replace CSS for playing
S
snxxwyy18d 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.
R
reddogg47618d 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.
R
reddogg47618d ago
looks like a good start. i've not checked responsiveness
No description
R
reddogg47618d ago
it's not too wide. image is on the left
R
reddogg47618d ago
two images is flexing, too:
No description
R
reddogg47618d ago
i broke the middle sections but it looks like good bones
S
snxxwyy18d ago
alright, thank you, i'll play around with it.
Want results from more Discord servers?
Add your server
More Posts
Some serious problems with my CSSSo, I have started building a site and I have got as far as the navigation, when I made it a few dayScroll Shadow in CSSWhen I scroll the white shadow is coming from below. How to make this with CSS. https://www.harpersOverflow-y: auto makes x-axis scrollbar appearHi folks, I have a react Sidebar component with scss styles. The sidebar has the main list 'sidebar_minFn confusionCodePen: https://codepen.io/Ceecee-Hart/pen/dyLZrKb I'm not sure where this extra space is coming fTriggering an animation based on scroll positionHi I want to recreate the marquee effect on scroll. https://afundi.im/ Any tips?Need help with a background img?How would I get the background pattern in the card to be behind avatar. I tried using position absolFull-Stack web developer is open for workHi, Everyone Full-Stack web developer is open for work. If you are looking for any **web/blockchain "space-between" with gridHey, is there a way to define the `space-between` value utilized with flex for grid? I tend to use thelp about this flex box bighelloi need help make this part of jshttps://www.coloniaverdenyc.com/menus in this website how can i use this java script thing switch mWhy margin right isn't working as expected?I was experimenting with negative margins and came across something that I don't quite understand. azimuth degrees into Cardinal PointSo I am trying to find out if there is a json file somewhere that would have the degrees and allow mHovering issuesWhen I hover on "register", my screen jumps. What cause it? https://codepen.io/Jonah-the-lessful/pFix background for div on hoverHey guys, You can see in screenshot when I hover on a card the background is getting disturbed. I neI've got an overflow warning on Firefox, but it's not regular.when I scroll down my page I get an overflow on my upper section, and when I go on that section thatI NEED HELP WITH CREATING CARDS WITH CSS(using flexbox or grids)I NEED HELP WITH CREATING CARDS WITH CSS. Everytime i create cards, i find it hard for the layout tWhy is my variable not Global ?I have successfully fetched data from an API, and can console.log it in one function but not anotherMicro Service Load BalancerBeen working on building micro services and I understand how scaling is aided through load balancersCoding responsive images the correct wayHi there! I've always wondered what the correct is to code responsive images on a website, in contaiFrontend questionI just have a simple question about front end , If I created a website using html css bootstrap and