I’m working on a design that incorporates a “Post-it note” style box. In the original design, this spans two sections. However, I cannot for the life of me work out how to get it to work.
Here’s a screenshot from the Figma design to show you what I mean:
Here’s a more zoomed-out view of the design: Link
And here’s a link to the Webflow design: Link
As you can see, the Post-it floats between the white and grey sections in the image. That’s causing me problems though.
Dropping it onto the page with static positioning pushes all the other elements around. Using absolute positioning I can at least get it into the place I want, but that then has the problem of it not reacting with other elements on the page (for example, it won’t “bump” into a text box next to it when the page width is shrunk, but instead floats right over it).
So far I’ve tried:
Putting the first and second sections inside a div block, with the Post-it note in between those sections, then positioning it with either margins or absolute positioning
Putting the Post-it note inside the top section and moving it into place using 1) margins and 2) absolute positioning
The same as above but inside the second section
None of these were what I needed. I’m sure there’s a simple way to do it but I can’t figure it out! If it’s easier to just put it inside one section instead of having it straddling two then I can work with that.
I’d say, using absolute positioning is the best option here, using % value will be better.
And for the text, you’ve to manually check that it won’t overlap. For smaller screen you add enough space on the top of the text. Like the following screenshot.
Oh I think you can try another way, by creating a 3 column section which overlaps in smaller screen. And you can add negative margin to make that Post-it overlap with the top section.
Thanks for the ideas! The second one has come pretty close to what I was after. The main issue is that if I create a negative left margin to drag the post-it into position, it pulls the “Tutoring you can trust” text with it so that it’s no longer centered. Is there a way to ensure that the headline text remains centered while the post-it is moved to the correct position?
Making the grid display: flex helps the headline text expand a bit, whereas display: grid makes each column the same width, which I don’t want. Is this the right approach?
I tried the first solution (absolute positioning with percentage values) but unfortunately the post-it overlapped with the text a lot. What’s the best way to avoid that?
Sorry for the noob questions, and thanks for any help!
No, you don’t put negative margins on the sides. You only need negative margin on top, so that it will overlap on top.
To get it to the sides, you just need to make that container wider than others or try fullwidth.
You can use Flex or Gird, and you can define width for each column. This would be little lengthy for me to explain here. So why don’t you look for Webflow resources here Web design lessons | Webflow University search for Grid or Felxbox and you will get good idea about it.
