I’ve been getting these weird bars at top and bottom. They don’t seem to be html/css elements, or i would’ve inspected and tried to resolve it.
These are kinda bars that I’m talking about.
If you are talking about the green and red sections that I’ve labeled before, the red is modal related/PlayCanvas UI related. The green is PlayCanvas UI related.
The background element Starting Screen has it’s anchor at [0.5 0.5 0.5 0.5] which means that depending on the window size, it may not fit and leave areas uncovered.
You can set the anchor to [0 0 1 1] which will always stretch the image to fit but may make the image look a bit odd as it’s not scaled proportionately.
I removed all the HTML modals (and their respective CSS files) that I created thru code. And that kinda solved the problem, only thing is the content is filled on whole screen. Earlier it adjusted according to 16:9 ratio (making black bars appear
on the sides, which was fine)
This is the result…
What I meant was, The whole canvas (and the elements in it) are sorta scaled to fill the whole screen (instead of maintating 16:9 and allowing some dead black bars on left and right sides)
Because this helps in adjusting the screen content across all aspect ratios.
I found culprit.
Some UI elements automatically got converted to 2880x1620 resolution. I don’t think I manually edited it to this wrong resolution, but anyway it’s now solved (as shown in first image).