Jc John Jc John - 1 month ago 10
CSS Question

bootstrap footer searchbar in mobileview get smaller

how can i make my bootstrap searchbar footer expand in row in my mobile view. In my desktop view it looks fine but when i go in mobile view 355 x 753 pixels view the footer search bar get smaller. I provided a screenshot in it below:

Screenshot of footer 355 x 753 view

I want to make my bootstrap footer searchbar take some space in right row of my footer in mobile view.

Here is my code:

<div class="col-xs-5 pull-left">
<div class="col-xs-7 input-group">
<form role="search" method="get" action="<?php echo home_url( '/' ); ?>">
<div class="input-group">
<input type="search" class="form-control stylesearch" placeholder="Search" value="<?php echo get_search_query() ?>" name="s" title="Search" /><span class="input-group-btn"> <button class="btn btn-default"> <i class="fa fa-search fa-1x" aria-hidden="true"></i> </button> </span>
</div>
</form>
</div>
</div>


css code w/ media query in (max-width 480px) :

.col-xs-5 {
width:49.667%
margin-left:-10px;
}
.pull-left {
margin-bottom:0.9%;
margin-top:1.1%;
}
.btn-default {
background-color: #e1e1e1;
border-color: #e1e1e1;
color: #333;
max-width: 50px;
}

Answer

change the second div class to full width col-xs-12, if dis doesn work change the class for the div to a larger number and the class of the social icons to 12 - the larger number of the first to stay on the same row

Do the following:

<div class="col-xs-5 pull-left">
<div class="col-xs-12 col-lg-7 input-group">  
    <form role="search" method="get" action="<?php echo home_url( '/' ); ?>">
    <div class="input-group">
      <input type="search" class="form-control stylesearch" placeholder="Search" value="<?php echo get_search_query() ?>" name="s" title="Search" /><span class="input-group-btn"> <button class="btn btn-default"> <i class="fa fa-search fa-1x" aria-hidden="true"></i> </button> </span>
    </div>
    </form>
</div>
</div>
Comments