Reducing width on contact form section

[Anonymous]

1. I would like to reduce the width of the contact us section, It is to chunky.
2. To reduce the thickness of the button below the contact us section, I would like the width to be the same as the just fixed above section though it is currently to thick

url: hygiadental.com

pw: melek

Thank you in advanced guys!

[Huptech-Web]

Hi @Anonymous, Kindly review and make the necessary adjustments to the code as indicated below.

Additionally, add "box-shadow: none" to the .button::after class.

A screenshot has been provided for reference.

#ContactForm .contact__button .button {
    background: #d4b61c;
    width: 100%;
    color: #fff;
    border-radius: 0!important;
    min-height: 4.5rem;
    line-height: normal;
}

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[Sweans]

Hey @Anonymous ,

To make the "Contact Us" section slimmer and adjust the button's thickness, you'll need to make some CSS changes. Here’s a quick guide:

Step 1: Go to the "Edit Code" section in Shopify Backend → Sales Channel → Online Store → Click on the three dots near the active theme customize button → Select "Edit Code"

Step 2: Search for base.css, global.css, or theme.css in the search bar

At the end of the CSS, add the following code :

.contact.page-width.page-width--narrow {
max-width: 500px; /* Adjust width as needed */
}

#ContactForm .contact__button .button {
width: fit-content;
border-radius: 100% !important;
}

If you need to adjust the height of the button, you can add the following code:

#ContactForm .contact__button .button {
width: fit-content;
border-radius: 100% !important;
min-height: 50px; /* Adjust height as needed */
}

Step 3: Save and check the result

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[Anonymous]

This was helpful thankyou! I just made the mistake of deleting my base.css file text so now I might have to restart dang.

[Sweans]

Hi @Anonymous ,

To revert your base.css file, follow these steps:

Step 1: Repeat Step 1 from my previous reply.
Step 2: Open the Assets folder and click Add a new asset → Create a blank file → Set the file name as base.

Step 3: Go back to your Admin Theme page and add the same theme you added to your online store.


Step 4: After the theme is installed, click on the three dots near the active theme's Publish button → Select Edit Code.


Step 5: Search for base.css, copy all the CSS codes, and paste them into your newly added base.css in your theme.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans