style a search box

Question

I have added a search box web part in a custom page layout in SharePoint online, I am using bootstrap

I am trying to make the width of the search box smaller using css but whenever I do the results are not what I am hoping for. Here is the search box on the right

Any type of styling the width seems to bring the icon down and search box stays the same width as you can see in the next image.

This is my HTML

<!-- Start Section 1 -->
<div class="section">
<div class="container">
<!-- 2 column Web Part zones -->
<div class="row">
<div class="col-md-6">
<WebPartPages:WebPartZone runat="server" Title="Stories" ID="TopLeft
<ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>  </div>
<div id="people-finder-container" class="col-md-6">
<WebPartPages:WebPartZone runat="server" Title="PeopleFinder" ID="TopRight
<ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>  </div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- End Section 1 -->

The css i have tried is pretty straightforward

#people-finder-container
{width:50px}

When that didnt work I tired to access the web part directly using using the web part ID

#MSOZoneCell_WebPartWPQ5
 {width:50px}

Still it gave me the same result. Any help in solving this would be much appreciated

Thanks

EDIT: Added content when inspecting search box element -

        <div id="people-finder-container" class="col-md-6">
        <div class="ms-webpart-zone ms-fullWidth">
        <div id="MSOZoneCell_WebPartWPQ5" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
        <div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
        <div webpartid="552f3049-1974-4968-a9b9-0a02385fdbba" haspers="false" id="WebPartWPQ5" width="100%" class="ms-WPBody noindex " allowdelete="false" style=""><div style="display: none;"></div>
        <div componentid="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr" id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr">
        <div id="SearchBox" name="Control" class="ms-floatLeft">
        <div class="ms-srch-sbLarge ms-srch-sb-border" id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_sboxdiv">
        <input type="text" value="" maxlength="2048" accesskey="S" title="Search..." id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) { $getClientControl(this).search(this.value);return Srch.U.cancelEvent(event); }" onkeydown="var ctl = $getClientControl(this);ctl.activateDefaultQuerySuggestionBehavior();" onfocus="var ctl = $getClientControl(this);ctl.hidePrompt();ctl.setBorder(true);" onblur="var ctl = $getClientControl(this);ctl.showPrompt();ctl.setBorder(false);" class="ms-textLarge ms-srch-sbLarge-fullWidth ms-srch-sb-prompt ms-helperText">
        <a title="Search" class="ms-srch-sb-searchLink" id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_SearchLink" onclick="$getClientControl(this).search($get('ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_sbox').value);" href="javascript: {}">                  <img src="/_layouts/15/images/searchresultui.png?rev=41" class="ms-srch-sbLarge-searchImg" id="searchImg" alt="Search">                </a>
        <div class="ms-qSuggest-container ms-shadow" id="AutoCompContainer">                    <div id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_AutoCompList">
        </div>
        </div>
        </div>
        </div>
        <div id="SearchOptions">        </div>
        </div><noscript>&lt;div id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_noscript"&gt;It looks like your browser does not have JavaScript enabled. Please turn on JavaScript and try again.&lt;/div&gt;</noscript>
        <div id="ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba">
        </div><div class="ms-clear"></div></div>
        </div>
        </div>
        </div>
        </div>

Answer 1

Finally resolved it. Looks like it was the inner part of the search box not resizing -

this was the code I used

#ctl00_ctl44_g_552f3049_1974_4968_a9b9_0a02385fdbba_csr_sbox
{
Width:200px
}

I didn't expect this to work or if it is even best practice but it is

• A. working
• B. working with bootstrap just fine.

Thanks for everyone's comments they got me thinking and I was able to find the solution.