How do I change the WordPress search bar widget dimensions.

  • Resolved patrickmath

    (@patrickmath)


    3 months, 1 week ago

    The second search bar on this page (under the header) is too thick for my liking. I am wondering how I can change it’s height. I have tried adding some CSS code:

    .search-bar-size { height: 40px;}

    But all it does is make the margins/barrier of the search bar smaller. And the visible part stays the same.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @patrickmath ,

    Please try to use this code.

    /*this is comments: search bar height*/

    input#wp-block-search__input-5 {
        height: 40px;
    }

    /*this is comments: search bar icon, use if necessary*/

    button.wp-block-search__button.has-small-font-size.has-icon.wp-element-button {
        height: 40px;
    }

    Thanks

    Thread Starter patrickmath

    (@patrickmath)

    Thank you for the reply @ahnuhmannathly , Though I am confused on where I need to put this code. Simply pasting it into the “Additional CSS” tab does not change anything. Thanks!

    Hi @patrickmath ,

    I can see that the height has been reduced to 40px.

    Thanks

    Thread Starter patrickmath

    (@patrickmath)

    @ahnuhmannathly Ah I am sorry. I didn’t realize that it only showed the changes after I changed the dimensions of the search icon too. Thank you so much!

    Thread Starter patrickmath

    (@patrickmath)

    I was also wondering, Is there a way I can do this with buttons too?

    Hi @patrickmath,

    I could notice the button also have a height of 40px when checked. I suppose its regarding the icon inside the button which is causing the issue?

    If yes, you can try updating the existing CSS added for the icon as follows:

    button.wp-block-search__button.has-small-font-size.has-icon.wp-element-button {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
    }

    Regards,

    Nithin

    Thread Starter patrickmath

    (@patrickmath)

    @wpmudevsupport11 @ahnuhmannathly Thanks a lot! Everything is well sized now.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.