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

What is Framer? Join the Community
Return to index
Matt Marriotti
Posted May 04 - Read on Facebook

Is there a good way to handle issues with images specifically this. on the Framer App I have a Nexus 5 body & an image which is 516w x 175h as exported from PS. When i import into the app, the image is properly sized aside from needing a Scale 2 property to fit the screen.

When you render in the Framer app on the Nexus 5, the images are cut off after about 1/3 the horizontal width.

I seem to have this issue with iphone images as well, where the phone renders the screens differently.

I have tried assigning image widths for elements that strech the screen, by defining the width:screen.width, but that always results in a image which is much longer than the screen is wide (like the screen is extended beyond the phone body) Not sure if i should be using some other means to dynamically assign sizes.

Last time I had this issue, I had to go back into my code & tweak numbers until it looked better, but I would love to use non-exact sizes to make the prototypes work on devices better. This image / devices issue is one of the main reasons that I can't use this tool for our company's prototyping.


Matt Marriotti This is the current prototype. 1st image can be swiped left/right & the bottom bar will rise on click or scroll.

Offir Gonen

The scrollarea container isn't defined correctly. You should use Framer.Device.sceen.width to get the correct screen width:

Offir Gonen

scrollarea=new ScrollComponent({
y: HeaderBar.height*2,
width:Framer.Device.screen.width, height:1750,
# superlayer: backgroundLayer
scrollHorizontal: false

Matt Marriotti

aw that worked! Thanks!. For future refernce, should I always use Framer.Device.screen.width or height if it want to define a size of an element like this? not just in a scroll control?

Offir Gonen

Yes. That's the best practice.

Read the entire post on Facebook