Creating a full text width for contact page

Solved
Highlighted
Excursionist
18 0 5

Hey there,

I have been creating a contact page for my website. I added the dropdown menu to segment what type of question a customer may have, however when i added this dropdown menu it is not a full width as the phone number text field below it. I was wondering how to make it full width like the phone number text field or even half width like the name and email text field so it matches?

https://4broke.myshopify.com/pages/contact-us 

password is: taimpe

Any help is appreciated!

Thank you

0 Likes
Highlighted
Shopify Partner
2800 614 753

This is an accepted solution.

@4broke 

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

#contact_form select#contact-concern {
    width: 100%;
}

 

Hope this helps.

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted

Hi @4broke ,

 

I noticed that your send now button and the dropdown is not full width. go to your theme.scss file, search for

.form-vertical input, .form-vertical select, .form-vertical textarea {
    display: block;
    margin-bottom: 10px;
}

Add width: 100%. This should make your send button and drop down the full width, same as the other sizes.

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes
Highlighted
Excursionist
18 0 5

yes! thank you so much yet again for your help , i appreciate it as always

0 Likes
Highlighted
Excursionist
18 0 5

@Defineify , i tried to search for this but this part was not in that file for me so i could not do as you said 

0 Likes
Highlighted

Hi @4broke 

In Timber.scss.liquid - my bad.

Go to line 1579 add it there width: 100%; ... right after margin-bottom: 10px;

After you add the top, you dont need the previous addition, you could delete

 

.form-vertical {
  input,
  select,
  textarea {
    display: block;
    margin-bottom: 10px;
  }

 

 

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes