Modifying the search form widget and decreasing the space between two widgets

[Eirikg89]

Hi everyone,

I'm having some issues with the design of my site that I hope you can help me with.

As you can see on my site http://www.Darwinian-Medicine.com, I've placed a search form and a subscribe form at the top of "Home - Top".

I have two questions pertaining to this:

1) How do I decrease the height of the search form so that it is as tall (40px) as the subscribe form?

I've tried inspecting the element in question to locate the proper selector to target, but I've been unsuccessful. If I set "height: 40px;" for #search-8, the height of the form doesn't change. All that happens is that the subscribe form ends up slightly below the search form. If I do the same for .search-form, the height of the search form changes, but the border at the bottom disappears. Moreover, the text is no longer placed in the middle of the container. It's placed closer to the bottom. Basically, the code only seems to "cut" some px off the box at the bottom.

What do I have to do to change the height of the box correctly?

2) How do I decrease the space between the search box and the subscribe box?

I want them to be closer together. I've tried setting "margin-top: -40px;" to the subscribe box. That does the trick. Unfortunately though, what happens is that if one fills in an e-mail address in the subscribe box and clicks "Subscribe" the text that appears ("Success! An email was just sent to confirm your subscription. Please find the email now and click 'Confirm Follow' to start subscribing.") is partly concealed by the search box.

Thanks

- Eirik

http://Darwinian-Medicine.com/

[Victor Font]

1. Edit the [type="search"] CSS at line 80 and add the padding and max-height as shown below:

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
    padding: 8px;
    max-height: 40px;
}

2. In your custom CSS, increase the negative top margin for #blog_subscription-3. As an FYI, you can do all of those margins in a single line of code rather than listing all the margins out individually, i.e., margin: -30px -10px -25px;

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Eirikg89]

Hi Victor,

Thanks for your response.

It seems though that you didn't pick up on what I mentioned under question NO.2.

If I simply decrease the negative top margin, the space between the widgets do indeed decrease, but the subscribe widget doesn't work optimally. If one enters an e-mail address and clicks subscribe, the text that appears is partly concealed by the search widget.

Again, thanks for your help!

[Author]

Posts