Skip to main content

How to make the search button bigger or put it under the search fields

1 min read Last Updated: October 20, 2026
Facebook Twitter Linkedin Email Copy Link

The GD > Search block has a few layout settings of its own, and a small piece of CSS covers the rest. The button keeps the class geodir_submit_search and sits in a wrapper with the class gd-search-field-search.

Settings in the block

  • Input size, in the Search bar group, makes the fields and button Small or Large together.
  • Button color and the button rounding options are in the same group.
  • Flex wrap lets the fields wrap onto a second row on narrow screens.
  • The button text is set in GeoDirectory > Settings > General > Search, under Search button label.

Put the button on its own full width row

Add this in Appearance > Customize > Additional CSS, or wherever you keep custom CSS:

.geodir-search .gd-search-field-search {
	flex: 0 0 100%;
	max-width: 100%;
}

The fields stay on the first row and the button fills the row underneath.

Make the button bigger

.geodir-search .geodir_submit_search {
	font-size: 1.25rem;
	padding-top: .75rem;
	padding-bottom: .75rem;
}

To change only one search bar, add a class in the block’s Advanced settings (Additional CSS class(es)) and put that class at the start of each selector. How to Adjust the GD Search Bar with CSS has more snippets, including hiding individual fields.

On this page