Streaming live at 10am (PST)

Problems with the responsivness op my site

Hey Guys.
I am pretty new to webflow and I am trying to design a site for my dad’s business and it is almost finished. But I ran into some problems concerning the responsiveness on other devices or websites width. When i change it to a display of a phone or ipad or even when I just want to look at my site on the desktop a lot of stuff jumps to different places. You can find the link to the website down below so you can take a look at the mess i created. How can i correct this?
Please help me!

https://preview.webflow.com/preview/laurenss-initial-project?utm_medium=preview_link&utm_source=designer&utm_content=laurenss-initial-project&preview=8388ca069399ccfeebb84275a77e7f58&mode=preview

Hi Laurens,

I’ve been looking into your problem and noticed that you have been using positioning with fixed px values to get your elements into the desired place.

Like you did for the picture of your dad’s shop:

grafik

While that method may work for desktop to some extend, it will cause you a lot of headache for the other breakpoints. I’d recommend you to try out other ways to position your elements (e.g. flexbox) as they are somewhat responsive by design or -at least easier to manage.

Take a look at the great tutorials on webflow university:

You could try use ready made wireframes and fill in your text and images. Like the ones you can add right through the designer:

grafik

Or by using parts of an UI Kit available at the webflow showcase:

If you have any questions, don’t hesitate to ask! :wink:

2 Likes