Streaming live at 10am (PST)

Responsive Layouts


#1

I can't seem to figure out how to position elements so that when I change screen sizes the elements on the page move into the proper position. I tried editing the page in Tablet/Phone mode and adjusting the site to how I would want it to look, but then it changed everything on the Desktop layout.

How do I adjust the positioning of elements between the layout types?


#2

Start with designing your site for desktop. Once you're done with that, then move on to the smaller size and so on and so on.

If you start designing mobile first, you will affecting all sizes bigger than it.


#3

That's what I'm saying, I designed the entire thing for Desktop first, then clicked the Tablet layout and adjust things to look proper there, but when I went back to the Desktop layout everything had changed.


#4

hmmm.... can you link your webflow project?


#5

It's at http://hotchic.webflow.com/ but I removed all the tablet/phone styling to fix the Desktop.


#6

Starting to figure things out. My navigation section for social links is probably setup majorly wrong.


#7

One thing to keep in mind is that there is only one document model (DOM), so if you change the order of elements, they change for all resolutions / media queries. Unfortunately, CSS media queries only affect styling, and not document order. This will change in the future with technologies like flexbox, but for now you have to be mindful that the order of elements (on the Navigator tab) is constant across all resolutions - so if you change it on phone, it will change on desktop as well.


#8