Streaming live at 10am (PST)

Positioning Optimizing Course for different size screens


#1

I wrote a forum need help post: http://forum.webflow.com/t/positioning-course-or-info-place/20502

And even though that is for a specific issue, this seems to be an issue for many websites and also purchased templates.

I looked through the forum and there are many people asking for help, in one case they were referred to the tutorials, but there is no tutorial really that deals with this.

Can someone please address this, finally for once and for all.

Best,

Aimanisms


#2

Problem looks like to me that you've not adjusted the section heights back to auto in the tablet and mobile views.

So go to tablet view and select each section you've applied percentage heights to and change the height and min heights to auto and then on the mobile landscape and mobile views, reset the styles of the height and min heights of those sections to let it cascade down.

You'll need to do this for each section that you've set the percentage heights on.

I've attached a screenshot below and highlighted what needs to change in red.


#3

Hi @mention79,

I tried what you advised, thanks so much. It solved some issues, but overal optimizing is still not good at all, when we go to different devices.

So what am I missing?


#4

There's a few things that you need to change still.

  1. Go to the navigator panel and click on banner and then go back to the style panel and change the Position back to Auto from absolute. and give it a a height of about 645px, or whatever you want it to be.

  2. Click on the Section whatwedo and remove the margin top of 90%. Change to 0.

You'll need to make adjustments to styles as you go down the device sizes. But always make them to the tablet size first as webflow uses a desktop first approach. So styles cascade from desktop to table to phone landscape to phone.


#5

Hey @mention79,

Again it worked on some stuff, but still left some stuff messed up. I understand the cascading down theory. it just seems to not be tangible enough in every situation...

Again, what am I missing?


#6

There were loads of styles that you need to change when I had a look through it earlier. Go through them one by one in the xray mode, to help see where your problems are, starting at the tablet size and fix those, and then move down to the mobile landscape size and do the same, and then once more once you've done those move on to the mobile view and fix those.

Just do it step by step and remove any unnecessary styles you've created previously at the mobile sizes to let the changes you make in the tablet size cascade properly.

If you don't understand what you are doing, then the best thing you could do though is learn how to code css properly, and then you'll understand how webflow works. There are multiple free options on the web, and some excellent paid for video trianing like teamtreehouse.com


#7

+1 on a workshop/tutorial on positioning in webflow.

in the meantime here is a good tutorial playlist on youtube about positioning: https://www.youtube.com/playlist?list=PLqGj3iMvMa4L731ispRfGAabXeRpM4RL6

i love all of devtips tutorials so you all may want to check out other videos from that channel as well.


#8

I know html and some css but webflow at least was not meant as a coding site, that's what it says on the front page. So yes, I would like more clarity how positioning in webflow, without paying for a course on a third party site.


#9

Thanks! I will be sure to check it out!


#10