Scaling Child Divs Along with Parent Divs on different viewports

[dCodeX21 (Alex B.)]

I know this is a common issue but I can’t seem to make it work despite of following the other related solutions from the other topics. I am new to Webflow so I am kinda still confused on lay outing.

My problem is I have a set of blocks that has a fixed width and height (design came from Figma), I made it fine in the default viewport, however, when I am trying to scale it down up to the mobile view, the layout won’t budge and still the same size despite the other elements being scaled in proportion to the view.

Can someone guide me on proper layout of divs, how many nested divs needed, and proper sizing so I can attain the desired output?

---

Here is my site Read-Only: [LINK][1]

[Port_of_Folio]

I’m not sure what you want the layout to look like. One way to manipulate the layout for mobile is by setting your flex box element “.UJ-Blocks” to wrap. This allows the elements to reflow.

To control the reflow stacking you can use percentage widths on the various elements or set a minimum pixel width.

This is a tough one though, since the content is meant to be viewed in sequence and there’s a good bit of copy under each.

If everything must scale (vs wrap) you can set a scale property on your parent. This keeps the layout but the mobile ux will take a hit.