Streaming live at 10am (PST)

Elements between sections


#1

Hello,

I am very new to Webflow and would like to know the best practice to place two objects at the sides of my webpage. I’ve attached a simple mockup image to illustrate further. I am no coder so a simple solution would be best. The two magenta objects should not move during scroll, they should be there almost like a background.

If the screen size changes the pointy end that is directed inward should still hit the section line. How can this be done?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hello @Konst

I will recommend you put this magenta elements in ‘fixed’ position and use vw and vh units to maintain perception.

To understand vw and vh here is this article that can help:


#3

Thanks a lot for the reply. When I set the object to fixed it disappears. I assume the object should be placed inside the section it is suppose to fill (or one of them)


#4

Yes, if you want it to fill one section set the object as absolute instead inside the element you want it to fill.


#5

That was my initial solution, but it does not keep its place when changing to different size resolution monitor which is the main problem with this method. I need it to hit the section line with the point going inward on different resolution sized monitors, it needs to stay put.


#6

Liked the idea of design you posted, so tried a few solutions myself. Tried absolute position on the purple elements between sections, and also to skew-transform the sections with a purple background behind them. However, I found this solution of transparent borders to be nicest, even though it would require a set height on the sections:

https://preview.webflow.com/preview/elements-between-sections?preview=668078581a32deb4ce808f52e0c6c773

Not sure about browser compatibility in IE, but seems to work in Chrome and Safari.

EDIT: Sorry, did not see you wanted the triangles fixed positioned. In my example, simply set them to “fixed” and move up and down appropriately.


#7

Like I mentioned in my previous comment I think you should consider using vh and vw percentages.

Can you please provide your read only link?


#8

Yes thanks, here is the project sharing link

https://preview.webflow.com/preview/richards-first-project-f45d56?preview=ca0f9f37eef9903b8ff0ddfe5305af77

If you have any other suggestion on this particular challenge or concerning anything else I welcome feedback. This is my first Webflow page so there might be technical mistakes.


#9

I placed a project sharing link in the comment above. I would appreciate it greatly if you took the time to suggest solutions that would work with it. The two objects which I need help with is the once on both sides. :slight_smile:


#10

Let me see if I understand. You want image 44 to cover the section 6 height?

and image 43 to cover the height of section 7 and section 8 together?


#11

Thanks for the quick reply. I’ve added an image on how I want it to look. (keep in mind that they need to stay in place on different screen resolutions.

Image 44 and Image 43 the correct once :slight_smile:

In the image I have curved lines on the hero but nvm that.


#12

Did you have time to look at my challenge?


#13

I think it would be better on first glance to split the magenta objects into 4. That way you have 4 triangles.

CloudApp

This way they will stay in place on different screen sizes


#14

I am actually not working with the megenta objects, that was just a quick mockup. If you look at the post below, how am I to place the objects? With Absolute positioning and dragging the object into place?


#15

I understand you’re not using the magenta objects, but regardless of what the object is, put it into your design program (Affinity, Photoshop) and split it exactly 50%.

Then the one half you add to one section and it becomes far simpler to do.


#16

Ye I think I got it to work now. The issue was a top margin that made it so I couldn’t place the object without moving it with the slide movers. So I removed the margin and it seems to work. Im taking a closer look at it now.

Thanks a lot for your solution :slight_smile:


#17

Ah yes, I can see that now on your link that you’ve split the image. Perfect. I was going to point out about the margin on your SVG file, I had just opened it up in Affinity.

Good luck! :vulcan_salute:


#18

For some reason this object just wont go down in the corner and stay there on different resolution sizes.


#19

Did you solve the issue, I’m so sorry i seem to have missed this reply.


#20

No, the issue was not solved. It would have been nice but no matter what I did it would not stay in place. I had to scrap the design choice for an easier one. Thanks for replying though :slight_smile: