• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Modifying the search form widget and decreasing the space between two widgets

This topic is: not resolved

Tagged: height, Search Form, widgets

  • This topic has 2 replies, 2 voices, and was last updated 5 years, 8 months ago by Eirikg89.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • December 27, 2017 at 9:06 am #214835
    Eirikg89
    Member

    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/
    December 28, 2017 at 8:44 am #214883
    Victor Font
    Moderator

    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?

    January 5, 2018 at 12:44 pm #215121
    Eirikg89
    Member

    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
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble