I have a Figma design strictly made for 1920x1080. When implementing this in React, I’m struggling to keep the proportions exactly as they appear in Figma when viewing on smaller laptops (e.g., 1366x768) or ultra-wide monitors.
My goal is to ensure the layout, text, and images don't "squish" or wrap differently, but rather scale proportionally.
What I've considered:
bootstrap's col-lg methods for keeping the left right divs in proper place
i know using px will each image text etc in their place but in larger screen it should take the same space as its taking in 1920px screen
Using a "Scale Transform" on a main container.
Using the CSS aspect-ratio property.
My Question: > For a dashboard-style UI where layout precision is key, what is the industry-standard approach to ensure the 16:9 ratio is respected without breaking the design on different desktop resolutions?
Top comments (0)