Remove padding around search bar - remove whitespace

[DrLani]

Hi all,

I am trying to remove a huge amount of padding between the search bar and other elements. If anyone would be so kind, please let me know how to do this.

https://kqiyqyh1gl4163dj-27277904.shopifypreview.com (This is the preview I’m constructing)

A bonus question: I tried to use the ‘inspect code’ function to figure out the correct place to do this. I kept trying to find it in my files but couldn’t, even though I was able to make adjustment in the inspector. I tried the section search, as well as the style.css.

Any tips?

[Made4uo-Ribe]

Hi @DrLani ,

Is this solve? I check it but it seems the search bar is moving? It look likes it the padding of both heading and the paragraph. Do you like me to pull that out?

[DrLani]

Hi! Thank you! It is not solved. My updated post would be how to remove these spaces:

[oscprofessional]

Hello @DrLani

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets-> styles.css>Add this code at the bottom.

.shopify-section--search .section_form {
    padding: 0px !important;
}

[Made4uo-Ribe]

Thank you for the information. Try this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

div#shopify-section-template--14942568644650__cc6a93ef-2b34-41f8-9226-66c0202b8877 {
    padding-top: 0px;
}
div#shopify-section-template--14942568644650__0f8d7fad-fecb-41f3-875c-586212fb9ae8 {
    padding-bottom: 0px;
}

Result:

I hope it help.

[PageFly-Richard]

Hi @DrLani

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Styles.css

.shopify-section--search .section_form {
    padding: 0px !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly