This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jamie Eula Evangelista
Posted Aug 11 - Read on Facebook

Hello everyone! Just started learning Framer a few days ago, and applying it to a project for a UX course that I'm taking. Has anyone ever experienced any issues when uploading a multi-screen project to the Framer Cloud?

Everything looks fine when I preview the project on the Framer mobile app and desktop (also in the platform itself). But when I view the Cloud link on a mobile browse, my layers look all messed up (screenshot attached).

Anyone know why that might happen?

17 Comments

Jamie Eula Evangelista

Whoops, forgot to attach the screenshot here.

Andrew Nalband

It looks like the same issue. make sure all your rows are attached to the same place

Jamie Eula Evangelista

Thanks for the reply Andrew Nalband! Gave that a try and tried organizing my layers different ways (, but still looking funky on the mobile browser. :(

Andrew Nalband

Jamie Eula Evangelista can you attach a link to your project? I want to help, but it's difficult to guess at the problem just from looking at screenshots. I'm guessing the solution has to do with positioning on the design tab.

Andrew Nalband

Check layers on the design tab for the way the positions are locked

Jamie Eula Evangelista

Yup, sure thing, here's the link to my project: https://framer.cloud/yklli. Appreciate the help! :)

Jamie Eula Evangelista

I wonder if it has anything to do with the screens being built on an iPhone7 artboard, and I'm trying to view the Framer cloud link on my iPhone6 mobile browser. It's weird, it looks fine on my mobile Framer preview app.

Wasn't sure how to use the locking feature. Would locking the body content help it to adapt?

Andrew Nalband

Ok, yeah take a look at these screenshots - in the design tab, some of your layers are locking positions relative to the bottom and others are locking it relative to the top. You want them all locking position relative to the top.

Andrew Nalband

Andrew Nalband

The position area sets how things resize as you view your project on different devices. In the first screenshot it says "as the screen size expands or shrinks, adjust this element to be 75 points from the top and 15 points from the left" The settings in the second one say "as the screen size expands or shrinks, adjust this element to be 252 points from the bottom and 15 points from the left"

Andrew Nalband

Am I explaining that clearly?

Jamie Eula Evangelista

Ah!! I see what you're saying there. That worked! Thanks so much for the help. Still trying to pick up all the nuances of the platform. That makes sense.

Andrew Nalband

Great! I'm glad it worked! You're welcome! There's definitely a bunch of people encountering issues here as evidenced by the post I linked above. This kind of position locking tends to be seen more in coding tools (like Apple's Autolayout for Interface Builder). If you haven't used that kind of thing before it takes a little explanation and experimentation to figure it out.

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

Andrew Nalband

Framer can also automatically resize layers by using that lock button. There's more on that here: https://framer.com/getstarted/design/?utm_source=Medium&utm_medium=Blog&utm_campaign=designtips_resizing#layout

Jamie Eula Evangelista

Awesome, thanks for the resources! Super helpful. Will have to look into these.

Andrew Nalband

In the process of looking at this, I also discovered a little feature I hadn't noticed before. When you hover over the lock area in the positioning panel you'll get a small animated simulation. Pretty handy for understanding how your element will resize and move around on different screens based on the selected options! These Framer guys think of everything! ;)

Read the entire post on Facebook