Relume
Log in

Community forum for knowledge and support

Updated last month

Fixing Margin and Blending Sections in Webflow

At a glance

The community member is having an issue with the margin and background color of a section on their website. They want a .5 rem margin of white on each side of the section when it turns to an ivory color, but the margin is only showing on the left side. They also want the section to stay ivory at the end so it blends into the next section's background.

In the comments, another community member suggests using a visual reference to better understand the issue. They also mention that the section appears to stay ivory when scrolling into the next section, so the second issue may have been resolved.

Another community member provides a Figma file link to help visualize the issue. The comments also discuss potential solutions, such as using an empty div with a border and fixed position, or putting the second section inside the first to achieve the desired effect.

While there is no explicitly marked answer, the community members collaborate to find creative solutions to the issues, and one community member confirms that a particular solution worked for them.

Useful resources
SSara Margolies
·

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.

Attachment
image.png
M
S
7 comments
MMatt Johnson

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?

SSara Margolies

here's the figma file
https://www.figma.com/design/4379Dn0HAjJ33Z6clSuHF8/Taste?node-id=7410-501&t=s9UXMnH1EK5xqIAr-1

SSara Margolies

scroll down into the next section and it turns back to white

MMatt Johnson

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

MMatt Johnson

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"

Attachments
image.png
image.png
image.png
SSara Margolies

creative solution but it worked! Thank you!

SSara Margolies

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

Attachment
image.png
Add a reply
Sign up and join the conversation on Slack