I'm currently working on a responsive website project and facing an issue with the absolute positioning of the search bar on the main page, which is crucial for me.
Below is the code snippet:
<div class="span4">
<form class="well form-search"
style="position:fixed; display:block;
left: 50%; top: 35.5%;
margin-top: -12.5px;
margin-left: -150px;"
action="{$GLOBALS.site_url}/search-results/">
<input type="text" class="input-medium search-query" value="I am Searching For"
style="width: 300px; height: 25px; ">
<button class="btn btn-large btn-primary" type="submit" > GO </button>
</form>
</div>
</div>
I've searched extensively and tried different solutions to make it responsive by changing from pixel-based to percentage-based positions, but the problem persists.
While it looks okay on desktop screens, the issue arises when viewed on mobile devices or iPads where the search box placement remains unchanged. I aim to have the search box positioned consistently across various screen sizes.
After tweaking the code, things improved slightly, but now the 'Go' button breaks to a new line instead of staying in the same line. Here's the updated code:
<form class="well form-search"
style="position:absolute; display:block;
left: 47.7%; top: 29.5%;
margin-top: -12.5px;
margin-left: -22.5%;
width: -webkit-calc(47.7% - 10px);
width: -moz-calc(47.7% - 10px);
width: calc(47.7% - 10px);"
action="{$GLOBALS.site_url}/search-results-jobs/">
<input type="text" class="input-medium search-query"
value=" I am Looking For"
style="width: 100%; height: 25px;
width: -webkit-calc(100% - 10px);
width: -moz-calc(100% - 10px);
width: calc(100% - 10px);">
<button class="btn btn-large btn-primary" type="submit" > GO </button></center>
</form>