Google Custom Search – Shortening The Width

This problem can be as worrisome as having difficulty accessing Google Keyword Planner. You have implemented the Google Custom Search on your website but noticed that it covers the whole width of the site. You want to reduce the width. Perhaps you have tried using the Google control panel but it is not helping you. Or maybe you tried changing the width in the header.php through the dashboard but are receiving “Scrape nonce check failed. Please try again.” error message. Below, I will show you two simple steps to reduce the width as you want – just like you see it on this website.

Step 1
Login to your cPanel and open “File Manager”>”wp-content”>”themes”>Open your theme>scroll down and find “header.php”>As a rule of thumb, make a copy of the file before making any changes>click “Edit” on the tools menu at the top of the page>In the window that opens, locate the Google custom search code and enclose it in a div as shown below:

<div class=”searchBox”>

…Google custom search code will be here…

</div>

Save and close the Edit window. To know more about using div, visit HTML <div> Tag.

Step 2
Now go to your custom CSS file from your dashboard and add the code below:

.searchBox { width: 50%; }

Step 3
If you refresh an open page of your website, you will notice that the width of the custom search has been changed.

Note: You can adjust the percentage above to suit your requirement. As stated at the beginning, it is always a good idea to make a copy of editable files. That way, if any editing does not work, you can easily go back to the original status.

Bignedu