Hi everyone, I am making my first responsive page, and I’m creating 2 breakpoints for the page. I have a footer comprised of 2 frames, each with some nav links. When try to increase the size of the bottom frame the contents stay in the middle and there is whitespace on the top and bottom in the frame. I have tried changing the constraints and the resize settings but nothing changes. I am trying to add images but I am having trouble doing so.
Hi Dominick!
It’s a bit difficult to help with only the information provided, but to start off, constraints are there to set up behavior for children when the parent size changes. Changing the constraints have no effect visually. For that you need to resize the parent.
What happens when you try to add images? What do you do?
Hi thanks for replying … Are you able to see the images I tried to attach? If not do I use the upload option to do so? That’s what I used before but was unsure if it worked because I don’t see them in the post. The footer is comprised of 2 frames, with a grey fill, one on top the other, and they are combined in an auto-layout … When I try to increase the height of the bottom frame, the grey fill stays in the center and there is whitespace above the grey fill and below it … the auto-layout containing both frames of the footer is set to left/right and bottom constraint
I don’t see your images, and it’s quite hard to understand without them I’m afraid. You should be able to just paste your image into the text field and it should appear as such:
Alternatively, share a link to a Figma design file that demonstrates the issue.
This is what happens when clicking your link.
Figma might change link if you make any changes in the file after copying the link, making the link unvalid. Not sure if that’s what happened but worth thinking about.
I hope this works … this is my first time trying to share a design file … does sharing the link mean you will be able to manipulate the design? … I copied the link from the share menu … I’m super new to all of this so thank you very much for taking time out of your day to try and help me … the link is for a replica Google page … there are 2 pages … a 1440 version and an 808 … I copied the 808 straight from the 1440 so all of the properties are the same … I believe I have some resizing issues on the 1440 … it seems like some of the child frames are not adhering to the parent auto-layout when I resize to a very small size or a very large size … like I said, super new to all of this lol
Just seen that it didn’t work … what am I missing here
I haven’t changed anything … so was the process I used to share the link right
1 Like
thanks for sharing that
So you’re trying to change the vertical size of the bottom frame in the footer? If you change the constraints of the Bottom Text layer to Top and bottom, it will resize with the frame.
Where are you trying to add images?
1 Like
Awesome that worked … thanks a lot … As far as images go I was trying to share images of the issue I was having but couldn’t get them to load properly … it just showed the name of the file with some symbols and numbers … I used the upload option and tried to drag and drop them … same thing both times … I have another issue with this design as well … do you mind taking a crack at that
You can upload or paste images into the text field. There is a bunch of rubbish text, but preview to the right of the text field should show your image, like so:
Feel free to explain your other issue.
yeah I saw the images in the preview but when I hit reply the didn’t show up in the post … I should be able to change my main frame from a desktop to a phone and everything should change accordingly right? Because that is def not happening
The bottom footer text becomes jumbled and the center frame gets cut off on both sides
Figma won’t adjust your elements by default. You have to make content responsive by using a mix of tools available. Playing around with auto layout and fill container size settings is a good start. It all depends on how you want each and every element to react to frame changes.
Yeah I followed a tutorial and I have my settings like the video … My main problem is that things are reacting the I thought the would …I have a center frame with an autolayout that is top and center with a left right padding of 16 and is hugging the contents with center/top constraints … inside the center frame are frames with autolayouts that are fixed and centered … I don’t have the option to apply constraints on the individual frames inside the center frame … when I switch the main frame to a smaller frame the center frame is cut off on the sides