Fixing Margin Issues and Background Color in Webflow Sections

·

I'd like there to be .5 rem margin of white on each side of this section when it turns to the ivory color. For some reason the margin is only showing on the left side. How can I fix this? Also, I'd like the section to stay ivory at the end so it blends into the next section background is that possible? Read only link Thanks in advance.

7 comments

Matt J.
·
Sara M. do you have any kind of visual reference for what you are trying to accomplish? Also it appears to stay ivory for me scrolling into the next section - did you figure that one out or?
Sara M.
·
Matt J. here's the figma file https://www.figma.com/design/4379Dn0HAjJ33Z6clSuHF8/Taste?node-id=7410-501&t=s9UXMnH1EK5xqIAr-1
Sara M.
·
scroll down into the next section and it turns back to white
Matt J.
·
yeah not entirely sure why the background layer doesn't appear to obey any kind of settings at all to shift to the left, I'm guessing because of the 100vw
Matt J.
·
wonder if you can just do an empty div with a border, position fixed, and no click events - it gives you that effect you were going for and maybe even better, depending on what everyone's expectations were. As for the last section staying ivory, you would have to create a custom interaction that essentially a modified version of the existing ones but doesn't do the "when scrolled out of view"
Sara M.
·
creative solution but it worked! Thank you!
Sara M.
·
I couldn't figure out the interactions but I used a different hack - put the second section inside the first so the background changes the same, and then added a brown div for the bottom to blend into the next section
💪1