Streaming live at 10am (PST)

How to adjust elements in responsive design?


#1

I'm working on my first Webflow project, and despite that theres a lot that I don't get yet, I really enjoy working in this tool. Awesome!

Okay so I need to make this completely simple design responsive, but can't seem to make a proper style that works for my element to adjust the screen size. The button stays when the text adjusts - how can i get the button to stay under the text?

Link: http://psychological-atlas.webflow.io/

Hope theres a friendly soul who can help me with this. Thanks!
- Frederik


Here is my public share link: LINK
(how to access public share link)


#2

Can you share your preview link please?


#3

Hi Frederik,

That is because you are using absolute positioning for your button - something you should almost never do!

Make us of the CSS box model instead:

  1. Wrap your content in a div and position that div with margins or use flexbox.
  2. Adjust the margins and paddings of the elements inside your div so they fit your desires.

Furthermore I'd recommend:
3. Take 2-3h out of your busy day and watch the video tutorials on webflow about the box model.
4. Learn everything about the box model, start here: Element Spacing Webflow Tutorial
5. Complete this for a quick understanding about responsive web design concepts: Webflow Playground

Believe me, this will help a lot.

Best,
Karl-Heinrich


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.