Custom Request Form Dawn Mobile Alignment

Store Design
, ,
1

Hello,

I am not a coder, but after countless hours on youtube and these amazing community boards (Thank you!), I was able to create a custom request form. On desktop it still looks not centered but on mobile it is definitely not centered and the selectors are not formatted. I know there’s something off in my code, but I can not find a solution.

Thank you for your help!

Link to Form:

https://thehumpedzebra.com/pages/new-york-but-request-form

Here is the code I am using:

{% form 'contact' %} {{ form.errors | default_errors }}
First Name
Last Name
Email
Shirt Color?
What Borough?
Requested Area
{% endform %}

input[type=submit] {
background-color: #000;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 0 auto;
font-family: inherit;
font-size: 80%;
display: block
}

input[type=text], input[type=email], textarea, select {
width: 70%;
padding: 15px 15px 15px;
margin: 15px 0px;
display: block;
justify-content: center
}

label {
padding: .5em 1em ;
float: left;
clear: left;
width: 200px;
text-align: right;
}

@media only screen and (max-width: 450px) {
.content-container.narrow.contact.form {
max-width: 100%;
}
}

2

Hello @thehumpedzebra ,

At the end of the your css add this css

@media screen and (max-width: 600px) {
.contact-form div label, .contact-form div input { 
    width: 100%;
    text-align: center;
}
}

Thanks

3 
#contact_form>div{
    display: flex;
    justify-content: center;
    align-items: center;
}

try this in your base.css

4

Hi @thehumpedzebra

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

.section-template–16061159276695__63787d77-1da6-41b4-b906-88f26c05dd19-padding {max-width: var(–page-width); margin: 0 auto; padding: 0 1.5rem;}

.section-template–16061159276695__63787d77-1da6-41b4-b906-88f26c05dd19-padding form div {display: flex; flex-direction: column; align-items: center;}

.section-template–16061159276695__63787d77-1da6-41b4-b906-88f26c05dd19-padding form div label {width: 100% !important;text-align: left !important; padding-left: 0 !important; line-height: 10px!important;}

.section-template–16061159276695__63787d77-1da6-41b4-b906-88f26c05dd19-padding form div input {width: 100% !important;}

@media screen and (min-width: 750px) {

.section-template–16061159276695__63787d77-1da6-41b4-b906-88f26c05dd19-padding {padding: 0 5rem;}

}

Regards,

San