I have layers that are differently sized but have to scale on top of each other without shifting relative to each other.
I started with a div block sized to the largest picture witch is positioned as absolute and added a grid inside.
The second layer needs to always be 23% from the top and 11.5% from the left. So I made the 1st row 11.5% and set the 1st column to 20%. I left the 2nd column and row auto.
Width wise everything is rescaling properly but height wise it isn’t working. Basically the top row isn’t resizing it’s height as the width is compressed I think because the original Div container holding everything
doesn’t seem to be resizing it’s height as the width is compressed.
I tried telling the width to always equal the height by trying to put in the size cell “=width” but it didn’t accept that input.
Instead, I created a section > main-div (made the font size of this div into 1em)
Inside that div, I added card-frame-div that holds the card frame. Made it absolute with higher z-index
Added card-image-div that holds the card image. Set the size to 25em x 40em. Centered it
Now as you scale down, make the font size of the main-div lower until the card image fits properly. Because the card-frame-div is absolute, it wont be affected
Thank you very much for the help and it’s an interesting solution but let me tell you
why I am looking for another solution. I don’t want to have to manually set the break points. I simply want it to smoothly scale from any size. With the way I originally attempted I knew the art image always had to start the same % from the top.
I can easily set this percentage manually at each break point but I guess I am looking for a more elegant solution that will help me be better at webflow.
Anyhow, if anyone can tell me how to get the height to scale the same as the width that would be great. Is there a way to lock the scale such as in photoshop?
I’ve noticed some changes in the grid in the different breakpoints. I would reset them all. If you hold down option key and click any settings that are blue.
if you look at what is happening when the screen scales down, it seems the height of the main Div {720 px x 720 px} never scales down with the width. so the main div container remains the same height all the time therefore my 11.5% spacer is meaningless cause it’s not scalling with the rest.
Sorry I am such a noob at this, I am not even sure how to express the problem.
That should be the Alt key. I had to look it up. lol.
Don’t feel bad. I’m still learning and I try to be careful not to steer anyone the wrong direction. Give me a moment to re-read your question and dive deeper.
I’ve now recreated your solution [AliSaeed] to understand it better and it has a similar problem to my original with respect to dynamic resizing. Sure your solution looks great at any break point but between breakpoints it misaligns.
You’re right John, It doesn’t align between the breakpoints. Hmm, this is an interesting case study for me.
I wanted to try one more way but couldn’t because of the card frame image - it had empty space at the top. So I downloaded it, and tried to upload it but couldn’t lol.
What I wanted to try was to position the image and the frame at the top.
I read that you wanted a seamless way that doesn’t require adjusting the size on every breakpoint. Tbh, I tried but can’t find a way. Hopefully, someone comes here to help you out (and me!)
Ok it seems to work properly now. Thanks everyone for the help. I will leave the link to the page active for 24 hours for anyone that wants to see how it was solved.
BTW does anyone know how I take down the link or make my project private again?
Sounds good. I believe you can simply create a new read-only link. And then turn off the “share read-only link” button and that link will no longer be there.
Good to know, but now I am on the same problem gen 2.
I duplicated what I thought was my now working setup but now they aren’t stacking fluidly because the main container div inside each section isn’t resizing it’s height with it’s width. I have to believe there is a way to set the height=width?
In your mobile landscape breakpoint your grid has a row set to 0 and it should be 11.527. Edit your grid and reset the rows.