Kevin Powell - Community•15mo ago

wrapper issue and question

Hey, I'm having a little issue with my wrapper working correctly, my hero section doesn't seem to respect the wrapper on the desktop view, could anyone help me see why this is happening? and a question, in the design for this site there's a white box that shifts positions in the background of the image gallery, I've used a ::before element to achieve that and I'm wondering if it's the correct thing to use to create that sort of design? many thanks to anyone that can help, here's a codepen if that helps 😄 - https://codepen.io/deerCabin/pen/OJrLEdo

CodePen

couply

...

18 Replies

croganm•15mo ago

You have one wrapper around the left column and one around the right. You need to have one wrapper around the entire hero section The wrapper has a max width of 1100 px, neither one of those columns will individually take that much size. Together they will though and then they'll be contained

snxxwyy•15mo ago

Ohhh I see now, I had a feeling it was something related to that, however on mobile view the left column has a border bottom, if I wrap it in the wrapper the border doesn't span the whole way across but is rather pushed in as that's why I initially laid it out like that, is there anyway around that with your fix etc?

croganm•15mo ago

I'm sorry, I'm on mobile rn so I may not be much help! If you update your codepen I can at least check though!

snxxwyy•15mo ago

no worries at all, you're definitely helping, thank you! everything is all updated 👍

croganm•15mo ago

Did you not want the left column to have a border bottom? I'd also say it's probably better to not have one all the way across just given it's outside of the expected wrapper. However, if you wanted to, you could likely do so with psuedo elements!

snxxwyy•15mo ago

I have a figma design for it that I'm referring to from a course and the border bottom is a part of the design there so I gather I need to add it 😅, ah I see, so if there's a wrapper you'd recommend not having anything come outside of it for the most part? Ohh yeah that makes sense, if I set a pseudo element on the left column though wouldn't it stick within the wrapper still?

croganm•15mo ago

It would, but you could just put a width of 100vw on the psuedo element and overflow-x of hidden on the body. It's a little hacky but far from the most weird thing ever done and actually more common than you'd think! Then I would just translate X negative value of the width (I think that's 5 vw since the body has a width of 100%), and I would translate Y of 50% (This way it takes up the same space as the border) It'll look like this:

croganm•15mo ago

croganm•15mo ago

section.hero .left-col::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    transform: translate(-5vw, 50%);
    height: 1px;
    background-color: black;
}

section.hero .left-col {
    padding: 3.3em 0;
    text-align: center;
    position: relative;
}

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    background-color: #E8F5E2;
    overflow-x: hidden;
}

section.hero .left-col::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    transform: translate(-5vw, 50%);
    height: 1px;
    background-color: black;
}

section.hero .left-col {
    padding: 3.3em 0;
    text-align: center;
    position: relative;
}

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    background-color: #E8F5E2;
    overflow-x: hidden;
}

Sorry, forgot to ping

snxxwyy•15mo ago

No worries 😄, I see how that would all work now, thank you for the help and explanation of everything! Could I ask how the translate is working though? Like where the value of 5vw came from due to the width of 100% on the body and how the 50% comes into play etc? I'm still getting familiar with transforms

croganm•15mo ago

Yea no worries! Your body actually has a width of 90%, equivalent of 90vw (5vw taken off the left side and 5vw taken off the right side since it's center aligned), which is what limits the psuedo element. We need it to take the full screen, so 100vw, but it's starting at the 5vw mark, so that's why we move it back 5vw. The 50% is because we need to move the psuedo element down. Borders start on the line of the content box and expand equally outside and inside the box. Kind of difficult to understand but we say the borders origins are the middle of the line. Bottom of 0 on the psuedo element puts it at the top of the line. To move it to the middle, we need to move it down 50%. I know that sounded complex but 😂

snxxwyy•15mo ago

sorry for the late reply, ahhh it seems so simple now 😅, thank you for taking the time to explain that! i was just playing around with the values a little and i was wondering if this was a valid way of doing it?

section.hero .left-col {
  padding: 3.3em 0;
  text-align: center;
  position: relative;
}

section.hero .left-col::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5vw;
  width: calc(100vw - 5vw);
  border-bottom: 1px solid black;
}

section.hero .left-col {
  padding: 3.3em 0;
  text-align: center;
  position: relative;
}

section.hero .left-col::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5vw;
  width: calc(100vw - 5vw);
  border-bottom: 1px solid black;
}

we don't seem to need to hide the overflow here?

croganm•15mo ago

Yea sure!

snxxwyy•15mo ago

oh awesome!

croganm•15mo ago

CSS has a million ways to do things haha, that's definitely simpler. I reached for what I knew since it was late rather than actually took a second to think it out 😂

snxxwyy•15mo ago

it does seem that way 😅, it gets complex figuring out the right way for something though haha, yeah no worries at all

croganm•15mo ago

Glad you at least took the idea, Understood it, and made it your own! That's all I ask when I try to help out so 😂. If you have any more questions or anything let me know!

snxxwyy•15mo ago

yeah in my opinion breaking it down, understanding why what line does what and then playing around with it the best way to learn something 😅, thank you, will do!

Gaming

Programming

wrapper issue and question