Retrangle - in center, responsive

HTML-CSS
1

hey!

i am trying to fix my project from HTML/CSS about a survey form.
in the background i am trying to center a retrangle which working good in my computer but not over the phone and i am trying to fix it for hours now but nothing works.
ill really appreciate ant help, this is the link to my work -
https://codepen.io/Ayamir/pen/QWEYoqw

thanks!

2

I don’t think you will succeed with position: absolute; on your rectangle.

I suggest you move the form inside your rectangle and center the rectangle with standard CSS techniques like margin-left: auto; margin-right: auto; or something like this.

3

Thank you, but every time I tried without the position: absolute the rectangle cant be under the text.
I tried tho adding margin-left: auto; margin-right: auto; and it has no change over the phone view.

4

The rectangle will be under the text if you put the form inside it, not next to it (moving the HTML code).

CSS centering techniques work the same on the desktop as they do on mobile phones.

5

There’s also the problem that several elements have a width (the rectangle is 50 em wide for example). It’s impossible to center that on a 360px wide phone screen.

For mobile, all widths should be set in %. Then use media queries to change the width on larger devices to a fixed value in em.

6

Thanks, been trying now with the % but not much changes. it is still different when i change the view and now i see that when i put it on full view in the computer it is different from the editor view.

7 
@media (max-height: 800px)

I think that should be max-width instead?