Streaming live at 10am (PST)

Workspace and preview alignment issues


#1

Hello I have to align elements in strange places on the workspace in order to have them appear in the correct place when I preview. Im not sure what I need to do to have the two locations match

Here is my site Read-Only: LINK
https://preview.webflow.com/preview/homelogic-llcs-fantastic-project?utm_source=homelogic-llcs-fantastic-project&preview=cf592a578544e82ce0f151dccfa3e5b7


(how to share your site Read-Only link)


#2

Hi @Homelogicatl Welcome to the Webflow Community! :smiley:

If you try and use the absolute positioning and define things with pixels, it will move things exactly where you tell them to go, to the pixel. Using % or VW and VH (Viewport Width/Height) will move things around according to the screen size they’re viewed on and create a more responsive website. (Pixels do have their place of course)

I’ve made a video with your project to show you how to go about making things move relative to the screen size it’s viewed on. Hopefully these steps will give you a way of thinking, there is nothing wrong with adding a div inside a div to get the desired result.

CloudApp

Make sure you label all of your classes so you can edit them easier later on in the future too :smiley:

Check out the livestreams and Webflow University if you haven’t already, they’re really great resources to learn from.

If you have more questions, please don’t hesitate to reach out.


#3

OMG! That was extremely helpful!! Thank you so much!
I have been fighting with that issue for over 2 weeks to the point I just gave up. Everything I did after that point kept moving things around in ways I didn’t want.

I’m sure you could tell how new I am by my numerous mistakes lol. I’ve watched all the webflow videos as well as pixel geek and others on YouTube. The problem I run into is that while none of them directly address my situation, they all seem to have different methods to accomplish things. One says use divs instead of containers, the other says containers are the way to go, somebody else says ONLY use divs and forget the other tools. I learned to use percentage by watching the videos lol. Otherwise I wouldn’t have known it was even possible cause px is default. I just need to figure out when its ok to use each item. Hopefully I can get to the point where I can help others like you helped me In the same time frame lol.

Thanks again!!

Greg Harris
CEO Homelogic LLC
678-827-6781


#5

You’re very welcome @Homelogicatl Glad it’s helped.

We all have to start somewhere, most users here were no different. A great way to learn is to reverse engineer peoples projects where they’ve allowed you to clone them or in read only mode.

That’s actually the incredible thing with Webflow, there is no right or wrong way to achieve something as long as it’s good for your user. A container is really just a div with a pre-defined width. Personally, I prefer a div as you can set the maximum width as say 2000px so it fill a large screen, but will still shrink down to mobile.

That right there is what makes this community so special. You learn from others and give back when you’re ready to. The more you use this powerful tool, the more you’ll learn, some by trying, some things you’ll learn by mistake too!

One thing I learned that really helped with the structure was to learn the association of parents and children in the designer to real life.

Parents tell children what to do, children listen to parents but are individuals to their siblings. It’s just like a real family…

…unless you’re from a broken home where your uncle married your dad and your sister is your first cousins wife. :crazy_face:


#6

https://preview.webflow.com/preview/homelogic-0?utm_source=homelogic-0&preview=5af345b85faf224bf8bb772d591a72da


#7

Wait I think I found it . pixelgeek has a flexbox layout video :blush: