Fit to screen

[MadalinaDrulea]

Hello, I am trying to make my Figma pages responsive on different devices (laptop, extra screen, etc) and I was able to fit the page on my screen so there is no scrolling involved, but on my laptop the components on the page cut off (so the scrolling doesn't happen) because the resolution is smaller than on the screen.

What I did:

• I added where it says Font Setting at the top of the project the following line in the CSS Font Face category: body { overflow: hidden; };

• I added in the div block, under style - custom style: background-size: cover.

Also, I have pages in my project which should function as pop-ups, so they would need to be smaller than the screen they are presented on and at this moment they fit the screen, do you know how I can adjust the dimensions of each pop-up?

Thank you!

[px2code]

I am not sure if I understand your question correctly, but please let me know if I don't answer your question.

It seems you want the component to fit the screen height, right?

In the HTML world, the content would be scrollable vertically by default. If you want the component to fit height, you need to enable the option Fit Parent at the root item.

In the photo below, then you can drag the bar to adjust the height to preview the change which can simulate devices with different heights.

If the component with an image (or background image), you can change the fill mode in the style tab at the right inspector.

adjust the dimensions of each pop-up?

If you enable the fit parent mode in the component, and I assume the pop-up is in the middle of the screen. Then you can pin the pop-up in all directions. (left, right, top, bottom), which means the fixed margin.

And the pop-up will resize with the device size, and you can customize the margin by MediaQuery margin.

I hope the answer addresses your question.

[MadalinaDrulea]

Hello,

Thank you for the quick response. In regards to the first part, if I enable the "Fit Parent" option, as you said the width is ok, but I would like the screen to adjust to the height as well, so there is no scrolling on the page (the way google is, for example).

[px2code]

@MadalinaDrulea

Hi, if you set fit parent at the root bottom, the height indeed fits the parent also, and there will no vertical scrolling anymore. Might you provide your screenshot of the settings? or pxCode link for our investigation if you still have the same problem

[MadalinaDrulea]

Hi,

This is the project but I'm not sure if you have access so I add snips below also: https://www.pxcode.io/627a2ce7ad3785001595b8ce/project/627b9c3e7c99d1001313776c/627b9c4ca1bd870014d62956

I did this part in order for the scrolling to disappear.

The above is the entire image.

And in the last image you can see that on the laptop the image is not displayed entirely, it cuts off. On the screen which has a bigger resolution it works fine.

Thank you!

[px2code]

I create a similar design to simulate the situation. And the editing steps are recorded as a video

https://www.loom.com/share/eeb7a273a4aa4de68e63cd636a3a83f0

The major technique here is

• cut spacers vertically
• enable grow and shrink for spacers
• close the min-height

Hope it help.

[MadalinaDrulea]

Thank you so much for your time!