How do I make my contact form wider? My theme is Simple

kash16
Tourist
6 0 4

I'd like for the form to take up more space than that. It was wider before but I changed the theme recently and I have a feeling that might have something to do with it "shrinking."Screen Shot 2021-07-16 at 8.32.57 AM.png

Replies 4 (4)

dmwwebartisan
Shopify Partner
12280 2546 3693

@kash16 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.contact-form input, .contact-form textarea {
    min-width: 80% !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
al3cuz
Tourist
10 0 4

@dmwwebartisan would you happen to have a code to center the contact form instead of make it wider?

wozkat.myshopify.com - creoff

cheers 😄 

dmwwebartisan
Shopify Partner
12280 2546 3693

@al3cuz 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.contact-form.form-vertical{
	text-align: center;
}
form#contact_form{
	display: inline-block;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
JaniceBanks
Shopify Partner
2 0 2

Hello there,  the code doesn't seem to work on what I want to do below:

 

JaniceBanks_0-1666653590211.png

 

when I use the code:

.contact-form.form-vertical{ text-align: center; }

form#contact_form{ display: inline-block; }

 

It looks like this below:

JaniceBanks_1-1666653753866.png

 

 

I used the earlier codes to extend my form and managed to center the "Contact" title, but I cant seem to align the form in the center with the title. Can you help? Thanks.