How can I properly align a custom field in my contact form?

Store Design
,
1

Hi all, I was hoping a coding wizz may be able to assist.

I have added a custom field to my contact form (a drop down box, titled ‘what is your email regarding’, with options to select).

In terms of functionality, it works, but no matter how I play around with the code, I can’t get it to align properly with the existing Name & Email fields above & the Phone Number field adjacent. I just want it to stay the same size, and behave the same way as the others on mobile.

Just wondering if anyone might be able to help, as I’m not sure what I’ve done wrong. I understand basic coding principles and can do a few things, but am far (very far!) from an expert!

This is the site: https://katiemckennaphotography.com.au/pages/get-in-touch

Many thanks in advance!

2

An actual fix would require a lot of markup updates but a quick fix could accomplish what you seek.

In your styles.css file, add margin-right: 20px to .contact__contact-option and .contact__form-message.

.contact__form-message, .contact__contact-option { margin-right: 20px; }
3

@KU24

.contact__form-phone label, .contact__form-name label, .contact__form-email label, .contact__contact-option label, .contact__form-message label {
    padding: 0 12px !important;
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->styles.css.liquid

like this

oscprofessional_0-1669274206474.png
oscprofessional_0-1669274206474.png1628×717 154 KB

4

Hello @KU24 ,

I would like to give you the recommendation to support you:

  1. Go to Online Store > Theme > Edit code

GemPages_0-1669279774935.png
GemPages_0-1669279774935.png1852×905 103 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1669280864562.png
GemPages_1-1669280864562.png1914×909 78.5 KB

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

5

Hi @Junaid-Ahmed , unfortunately this didn’t work. But I appreciate your reply!

6

Hi @GemPages , unfortunately this put three boxes along the top row, and then, as the screen size reduced, the boxes all came together with no padding, finally splitting up over four lines. But thankyou for your reply, I really appreciate it!

7

Hi @oscprofessional , thanks so much for your reply! This was certainly a very close solution! It has made the boxes behave in the same way, which is excellent. The ‘What is your email regarding?’ box and the ‘Message’ boxes are still longer than the Phone and Email boxes though, and overhang the form - is there a way to change that at all?