I’m building a web app in Lovable on a MacBook.
The design, layout, and text placement look correct on both MacBook and iPhone.
However, as soon as I open the app on Windows, the layout changes.
To make the page look “right,” the browser often has to be zoomed out to around 75%.
On some Windows computers that use 125% display scaling, the web app only looks correct when scaling is reduced to 100%.
Why does this happen, and how can this be solved in a standardized way so the layout looks consistent across all devices and operating systems?
prompt ai to stay consistent across all devices and screens
Yes ofc but it doesn’t work. Look at this thinkpad vs mac
you can go manually into the code and fix it
Im not that technicall. I ask lovable to standardise the look and use the current look displayed on my mac but it doesnt work. Im really stuck here.
@GrandLion484
it’s due to Css issues I can fix shortly…
There will be “px” based css width/height settings. you have to upgrade those all to %
i.e
please do the following exactly.
• convert the following concept in css style “px → rem, em, %, vw, vh”
• Fixed widths → HappyOwl455-width
• Fixed heights → content-driven sizing
I sent that to dev but he doesn’t know how to code the layout so the next best thing is to look…