How to style a blurred, centered and responsive box for a login form with full size background?
I have tried to build a login form on a HTML page (Angular) that has a full size, centered background image and the form is placed in a div with blurred background, that is centered in the x- and y-axis of the browser window. That is how far I came: https://codepen.io/surfermicha/pen/ZwpxBa
Here will be a login form later
- The centered box isn’t exactly in the center
- It’s not responsive. The div is to small at small devices. I want 10px margin left and right, but a max-width 500px on bigger screens.
Could anyone help edit the codepen for a working responsive solution
asked Jan 29, 2019 at 16:07
273 1 1 gold badge 3 3 silver badges 17 17 bronze badges
its exectly center bro
Jan 29, 2019 at 16:12
hm you are right. But it was when I set position to relative. i changed that.
Jan 29, 2019 at 16:15
so what you want ? from our side
Jan 29, 2019 at 16:16
how to center it that it has on small screens the same margin (10px) when you look at the codepen it has left more space then right