How do I get rid of the white spaces on the contact form?

[MaisonBillonDon]

How can I get rid of the white spaces on my contact form? I've included a photo of what my contact form looks like when I'm in the contact page editor. The white spaces are circled in red. 

Theme:Origin

URL: billon.maison

[CodingFifty]

Hi @MaisonBillonDon,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

    .section-template--15894320906306__contact-form-padding {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

div#shopify-section-sections--15894318022722__footer{
    background: #19100b !important;
    bottom: 0px !important;
   top: 0px !important;
    margin-bottom: 36px !important;
}
}

[MaisonBillonDon]

This did not work.

I've included photos of what your solution looks like when implemented. 

Do you have any other ideas that may solve the problem?

[mt686]

To remove the white spaces at the top and bottom of the contact form, you can adjust the padding or margin of the related sections in your theme. Here's how you can do it:

1. Custom CSS to Remove the White Spaces:

.page-width {
    padding-top: 0px; /* Removes top padding */
    padding-bottom: 0px; /* Removes bottom padding */
}

.contact-form-section {
    margin-top: 0px; /* Removes top margin */
    margin-bottom: 0px; /* Removes bottom margin */
}

• Steps to Apply:

  • From your Shopify admin, go to Online Store > Themes > Customize.
  • Open the Custom CSS or Additional CSS field in the Theme Settings.
  • Paste the above code and click Save.

Note: The class names .page-width and .contact-form-section may vary depending on the theme setup. If the above code doesn't work, use your browser's inspect tool to identify the specific class names associated with the sections that have the extra white spaces.

---

Streamline Your Store Edits with EasyEdits

If you prefer to avoid CSS adjustments, my app, EasyEdits, makes it simple to handle design tweaks like removing white spaces. EasyEdits is designed to help Shopify merchants make these edits without the need for coding knowledge.

---

Hope it works out! Let me know how it goes or if you need further assistance.