Why are my buttons & headings moving on the largest and base breakpoint?

Everything seems to look fine in the designer, until I click on the eye icon of ‘Toggle Preview’.

See the screenshots at the bottom of this topic what happens on the base breakpoint and largest breakpoint…

[Somewhat related to the the main problem: how do I keep elements to stay neatly INSIDE the box of a Div Block/Link Block/Column/Section or Container?]. I’m such a newbie to Webflow that I forget these basic things.

P.S. Page guides (those light blue guiding/grid lines) you can drag onto your page as in Adobe InDesign or Illustrator would be an awesome addon to Webflow, so things would magnetically stick to that, would be helpful in this case for aligning the headings in my project. And the Start Here content on the left.

Here is my read-only link:


Published link: https://www.realizeyourgrowth.com/your-career-path


Thanks in advance! :smile:

Hi @Jarmo,

You could try setting the ‘Workshop 1’ card to position: relative then set the ‘YCP Content Block Workshop Title’ element to position: absolute > bottom.

Here’s a screen recording: Screen Recording 2022-05-21...

Hope this helps!

Thank you Milan!

Thanks to your answer the explanation about Absolute positioning in this tutorial now makes sense to me: Position | Webflow University

Now ‘YCP Content Block Workshop Title’ arranges itself to the bottom in relation to the ‘Workshop 1 Card’? Or to Image 29? Because that image was also set to Relative already. The ‘YCP Content Block Workshop Title’ doesn’t move though if I set Image 29 back to Static or something else. In the above tutorial he says that it looks for the first element in the hierarchy that isn’t set to Static. (around minute 4:40)

Can apply this same strategy for the two green buttons on the left! :ok_hand: :white_check_mark: And then arrange to the left instead of bottom.