Check Page in Mobile mode doesn't looks like the design

heliomar-pena commented 2 years ago

Describe the bug I have checked and check view is not showing how in the desktop

To Reproduce Go to https://dev--azordev-dasher-user.netlify.app/check

Expected behavior I have listed the bugs here.

Header need more horizontal (<- ->) padding. (Check screenshot 1)
Text "Hola!" "Ingresa tu numero de boleta" have very space between. This is because <h1></h1> and <p></p> have a default line height, you can solve it modifying this property with CSS. Click here to see an example. (Check screenshot 2)
Once you have erase the height to the header text, you will notice that doesn't exists space between the hand image and the text, please add a little of margin. (Check screenshot 3)
The input should be flat, actually it have shadows. (Check screenshot 4)
The form is not center (The input, input label and button is more for the left). (Check screenshot 5)

Screenshots

Header need more horizontal spacing Actually is: Should be:
Text "Hola" and "Ingresa tu numero de boleta" have very space between Actually is: Should be:
Hand image and text doesn't have space between, please add a little more
The input should be flat, please remove shadows and add border gray or move to up the shadow to create this effect Actually is: Should be:
The form doesn't looks centered, I have checked and the form container is centered, but the content is not ocupping the 100% of the width. Please add width: 100% instead width: 90% to the input and the button (or simply erase width style and use a display: block)