Fixing Design Issues on Contact Page

Highlighted
Tourist
59 0 1

Our Contact page (https://illuminatelabs.io/pages/contact) looks poor on both desktop and mobile. The "Send" button is to the bottom left which looks off because the page content is horizontally aligned. I changed this line in the page.contact.liquid file from:

<input type="submit" class="btn right" value="{{ 'contact.form.send' | t }}">

To:

<input type="submit" class="btn middle" value="{{ 'contact.form.send' | t }}">

This didn't move the button to the middle but to the left where it currently is for some reason. 

 

There is also weird spacing. The text content ("Use this form...") should be between the header ("Contact") and the form, but it's right at the bottom next to the form which looks amateur. I don't know how to change the padding because there is no padding code in the liquid file.

 

Does anyone have any ideas how to make these small changes?

0 Likes
Highlighted

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px){
.btn.right {
    margin-right: 33%;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
59 0 1

Hi, thank you for your response. I just added that to the Theme file and nothing changed when I previewed the page unfortunately.

0 Likes
Highlighted

Hello 

See this screenshot:
184.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

@CalCook100,

If you want "Send" button in middle then please add below css

#contact_form {
	text-align: center;
}
#contact_form .btn.right {
	text-align: center;
	float: unset !important;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
59 0 1

That worked for aligning the Send button. Thank you!!

 

Do you have any ideas for how to move the text "Use this form..." up so it's between the line below "Contact" and the form, rather than right above the form?

0 Likes
Highlighted

@CalCook100,

I think you did this


@CalCook100 wrote:

That worked for aligning the Send button. Thank you!!

 

Do you have any ideas for how to move the text "Use this form..." up so it's between the line below "Contact" and the form, rather than right above the form?


 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
59 0 1

I'm unsure what you mean. I didn't complete it yet. I'm hoping to move the text up vertically on this page (https://illuminatelabs.io/pages/contact) so that it's between the horizontal line below "Contact" and the top of the form.

0 Likes
Highlighted
Tourist
59 0 1

I fixed it today but thank you for the help.

0 Likes