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

What is Framer? Join the Community
Return to index
Richard Sellies
Posted May 02 - Read on Facebook

Hi all, can't get my head around this. All I would like to do is make the share link have the full screen width of the device its been viewed on. Right now it stays at fixed width and on some devices it shows only half the width it should be. Can some help me please.


Eelco Lempsink

You can use the variable Screen.width as the value for the width of the layer to make it span the whole width of the screen, independent of the device.

Marc Krenn

☝️ this

+ set your Device (button is located above the preview) to "No device".

Richard Sellies

So my images that I imported that are 750px wide, need to stretch out on a 1440px (Samsung gs6) or any other devices that you shared the link too with a different width.
I did this code, and it still not working.

# Import file "TheCollectiveExperince-testa15"
psd = Framer.Importer.load("imported/[email protected]")

print Framer.Device.screen.width # Output: 750
print Framer.Device.screen.height # Output: 1334

psd.width = Framer.Device.screen.width
psd.height = Framer.Device.screen.height

Richard Sellies

After a lot of re-searching, it seems that you can't have the image resize to the width of the device being viewed at (Which is lame if you want to share the link to someone who has a different size mobile). You can only do it to a shape layer but not an image. Images will need to be resized to the right device width of what you want to view it on. So if you have a photoshop/sketch layout thats 750px w and you need it to fit on a lager layout.You have to resize the canvas in photoshop/sketch and re-import back in.

Eelco Lempsink

Hi Richard, you can indeed not change the size of an imported image, but you can scale it. What’s important to note is that by default transformations like scaling, rotation have an origin in the center of the layer, but this is likely not what you want in this case, so you’ll need to change the origin too, e.g.,

sketch = Framer.Importer.load("imported/[email protected]")
sketch.screen.originX = 0
sketch.screen.originY = 0
sketch.screen.scale = Screen.width / sketch.screen.width

This will adjust the scale based on the relative width of the screen and the imported image to make it always completely fit the width.

Read the entire post on Facebook