How change size of search block?

  • Resolved vytaulla51

    (@vytaulla51)


    2 months, 3 weeks ago

    Hi:

    Thank you for this theme.

    The search block is bigger than I would like and I’ve selected “small”. I wanted to put it up at the top of the page but it’s twice as tall as the space. Putting search in navs is pretty common – who wants an inch tall search icon? Is there a way to make it smaller? Can you add an extra-small, or better yet, not pick arbitrary sizes but let users choose? It’s maddening because changes to the button – which I’d ike to be 30px by 30px makes the input field too small (when I try via CSS).

    Thanks!

    • This topic was modified 2 months, 3 weeks ago by vytaulla51.
    • This topic was modified 2 months, 3 weeks ago by vytaulla51. Reason: search block

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter vytaulla51

    (@vytaulla51)

    For those who might have this question:
    I wanted to be able to put a search icon in the site header. The design was such that putting it in the small menu at very top wasn’t ideal coz it pushed content off-page when you click and search input becomes visible. Also it need to be a small icon – the theme’s smallest icon was about 3/4″ square – way too big for the small space I was working in. In end I put it further down, but to get it to a smaller size I had to add these styles to the custom CSS: 

    /*reduce size of search*/
    .wp-block-search__button
    { padding: 0px !important;
    }
    input.wp-block-search__input, input[type=search] {
    padding:0px !important;
    }

    AND, I reduced the font-size that applied to the search button to 15px. That gave me a nice little square with the mag glass in it.

    Moderator mizantium

    (@janmtm)

    Hi @vytaulla51 !

    It’s great that you’ve shared your solution so that others can benefit!

    Thank you for that. I’ll set this as Resolved.

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