{"id":2375,"date":"2026-10-20T08:32:19","date_gmt":"2026-10-20T07:32:19","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/search-button-full-width\/"},"modified":"2026-10-20T08:40:40","modified_gmt":"2026-10-20T07:40:40","slug":"search-button-full-width","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/how-tos\/search-button-full-width\/","title":{"rendered":"How to make the search button bigger or put it under the search fields"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The GD &gt; Search block has a few layout settings of its own, and a small piece of CSS covers the rest. The button keeps the class <code>geodir_submit_search<\/code> and sits in a wrapper with the class <code>gd-search-field-search<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Settings in the block<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Input size, in the Search bar group, makes the fields and button Small or Large together.<\/li>\n\n\n\n<li>Button color and the button rounding options are in the same group.<\/li>\n\n\n\n<li>Flex wrap lets the fields wrap onto a second row on narrow screens.<\/li>\n\n\n\n<li>The button text is set in GeoDirectory &gt; Settings &gt; General &gt; Search, under Search button label.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Put the button on its own full width row<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Add this in Appearance &gt; Customize &gt; Additional CSS, or wherever you keep custom CSS:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.geodir-search .gd-search-field-search {\n\tflex: 0 0 100%;\n\tmax-width: 100%;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The fields stay on the first row and the button fills the row underneath.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Make the button bigger<\/h2>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.geodir-search .geodir_submit_search {\n\tfont-size: 1.25rem;\n\tpadding-top: .75rem;\n\tpadding-bottom: .75rem;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">To change only one search bar, add a class in the block&#8217;s Advanced settings (Additional CSS class(es)) and put that class at the start of each selector. <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/advanced-search\/how-to-adjust-the-gd-search-bar-with-css\/\">How to Adjust the GD Search Bar with CSS<\/a> has more snippets, including hiding individual fields.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The GD &gt; 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 Put the button on its own full width row Add this in Appearance &gt; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[211,432],"class_list":["post-2375","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-tips-tricks-more","gd_placecategory-how-tos"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=2375"}],"version-history":[{"count":1,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2375\/revisions"}],"predecessor-version":[{"id":2436,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2375\/revisions\/2436"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=2375"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=2375"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=2375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}