I’m currently working on mobile app design, and I’ve fixed the CTA button position to the bottom of the viewport. However, when I prototype the button to be fixed, the screen gets cut at 926 px height, and it’s unable to properly display the long scrolling full mockup in the file. How would you suggest dealing with this situation?
When you say “fixed the CTA button position to the bottom of the viewport” do you mean “Scroll behaviour” is set at “Fixed”? In which case, you should be able to scroll the mockup behind the fixed CTA. Or is that not what you mean? Sorry, I may not be understanding correctly.
Thank you so much for the response! Yes, the scroll behavior is set to “fixed,” and I understand that un-clicking the “Clip content” option will show the entire mockup. However, the CTA ends up on top of the mockup, covering the design that appears behind it as you said. I was wondering if there are any alternative ways to display the whole design without overlapping the CTA. Is it possible to keep the mockup in a fixed position at the bottom of the viewport while still showing the entire design in the file?
Hm - not sure! Do you have an example of what you mean? Or what happens if you play about with the “fixed” and “sticky” options for either/or the CTA or a frame containing the rest of the design?
So I want to keep this bottom nav in green rectangular (“CTA” I said on the previous thread) to be bottom viewport in prototype mode as attached,
However, in the design file, my intention is to display the complete mockup design while positioning the bottom nav all the way down in a pink rectangular area, ensuring that it does not cover any part of the mockup.
Is it possible to keep the mockup in a fixed position at the bottom of the viewport in prototype while still showing the entire design in the file?
If I understand you correctly, then I think the only thing you can do is have two designs: one with the prototype mockup using the sticky CTA as you have in the first screenshot, and another with it showing the whole thing as you have it in the second screenshot.
You could I suppose make components of the relevant parts of the design so at least any changes you make can automatically appear in both.
1 Like
Thanks so much for your answer! Yes I did that way for now, one is for prototype and the other is for design.
Thanks! I tried this way but it doesn’t work well in this situation… will prepare 2 designs, one for prototype and one for design for now…! Thanks again.
You can achieve this with an auto-layout on your top frame (as shown below)
Frame A has a height set to fill, and a scroll behavior overflow set to vertical
Frame B has a height set to hug
Then you can resize your Main Frame (parent of A and B) and B will always be at the bottom while A will take the remaining space and allows scroll through itself
1 Like