"Exploring the Differences in Bootstrap Input Boxes Between Mobile and Tablet/Desktop Devices

Currently working on a Wordpress theme that utilizes Bootstrap for a website. Everything looks great on desktop and tablet, but when the window is resized to mobile size, the search input in the navbar gets misaligned. Any suggestions on how to fix this?

Check out the site here!

Navbar

<nav class="navbar navbar-default navbar-color">
    <div class="container">
        <div class="navbar-header">
        <a class="navbar-brand title"  href="http://www.breakingborderline.co.uk">Breaking Borderline</a>
        </div> 
        <div class="navbar navbar-right">
        <?php get_search_form(); ?>
        </div>      
    </div>
</nav>

Search form

<div class="form-group">
<form role="search" method="get" class="form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="search" class="form-control form-control-sm" placeholder="Search for..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:">
    <input type="submit" class="btn btn-default" value="Search">
</form>
</div>

Thank you

csstwitter-bootstrapforms

Answer №1

.form-control elements are block-level on smaller devices.

To change them to inline, you can use the following code:

.form-inline .form-control {
  display: inline-block;
  /* Use vertical-align to align them */
  vertical-align: bottom;
}

<form role="search" method="get" class="form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <input type="search" class="form-control form-control-sm" placeholder="Search for..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:">
    <input type="submit" class="btn btn-default" value="Search">
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Concealing a hyperlink within a DIV by removing or hiding it

I am looking to temporarily hide or remove a specific link (team.aspx) within a drop-down menu, with the intention of adding it back in later. Here is my current code: <div id="nav_menu"> <ul id="nav"> <li class="current"><a href= ...

jqueryhtmlcss

Developing a PHP foreach loop that integrates seamlessly with a W3 responsive grid

Is there a way to generate multiple sets of three columns using w3.css and a foreach loop to fill each set with data from a sample database? Attempted code resulted in all the columns being in a single row: <?php foreach ($products as $index => $pro ...

phpcssloopsforeachw3.css

Angular material tree with nested branches broken and in disarray

I'm facing a challenge with the UI issue of expanding trees on the last node, as it always creates excessive lines from the nodes, similar to the image below. I attempted to adjust the left border height but saw no change at all. Does anyone have any ...

cssangularmaterial-ui

The Countdown feature is currently only functioning on the initial button and not on any of the other buttons

I could use some assistance. I have a download button with a countdown, but there seems to be an issue with the button's functionality. It only works on the first button, or if the second button is clicked first, it starts the countdown on the first b ...

javascripthtmljquerycss

Ways to stop users from copying the content of a specific div using CSS

Is it possible to completely disable user text selection with CSS? Check out the code snippet below: .unselectable{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-s ...

htmlcssselectionhighlightingtextselection

Card with multiple links and tab-stopping

I'm trying to figure out the best way to navigate through a series of project information cards that include links to a live demo and Github Repo without overwhelming visually impaired users with excessive tab stops. I want the navigation to be seamle ...

htmlcssaccessibility

Tips on how to ensure that both the collapse button and the dotted line are in sync and operate

After removing the first line in the css display: flex !important;, the collapse-expand button functions correctly (click on top of set1), but it removes the in-between dotted line. However, if I keep the first line in the css display: flex !important;, t ...

cssbootstrap-4

Struggling to find the solution as to why my custom cursor is not increasing in size when hovering over it

Hey there, I've encountered an issue with a custom cursor code. The cursor is designed to be a ball/circle that grows or scales when hovering over a link. However, despite having the function in the code below, it doesn't seem to be working prope ...

javascripthtmlcss

The display function in Javascript has a tendency to work sporadically

I’ve been tasked with creating my own tic tac toe game through coding. While I am relatively new to programming, I have a strong passion for it. At the moment, I've set up a basic function to hide only the "O", leaving only the "X" visible on the gr ...

javascripthtmlcssfunction

Activate the full-screen video mode

On the website airbnb, there is a "play" button on the homepage that, when clicked, activates a fullscreen HTML video. Is it possible to design a button or function that can automatically trigger a full-screen HTML video? ...

javascriptcsshtml

The website displays perfectly in Atom, however, it is not functional in any web browser

My website is currently in the development phase, and I'm experiencing issues with certain div elements not positioning correctly once the site goes live. Specifically, the "Follow Us" tab at the bottom of the site, among other divs, has been affecte ...

javascripthtmlcss

Unbelievable attribute: sup causing peculiar styling in link element

We've recently come across an issue where the text-decoration of an underline in an anchor tag appears strange when there is a sup element present. The visual glitch looks like this: https://i.sstatic.net/X2Yqg.png For reference, here's the HTML ...

htmlcss

Tips for changing text color using JavaScript when hovering the mouse?

I am working on a website for a snow cone stand and am looking to add a unique effect to their flavor list. I want to create an interactive experience where hovering over a flavor name scales the text and changes its color to match the real fruit. Is the ...

javascripthtmlcsssass

Designing HR components using Bootstrap and CSS

Trying to integrate Bootstrap into my portfolio website, but struggling with styling the hr elements. They keep coming out like this: https://i.sstatic.net/IApoi.png They also refuse to center align, always sticking to the left. No idea why this is happe ...

cssbootstrap-5

Tips for aligning a text box and button side by side in HTML

Can someone help me? I am trying to keep the text box and button in the same line, but they keep appearing on separate lines: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

htmlcssbootstrap-4

Renew the Look of Dynamic HTML with Updated Styles

In the middle of my website, there is a console that contains links to dynamically update its content using javascript. Everything works smoothly, but the new HTML added dynamically does not have any styling applied to it. Is there a way to refresh the CS ...

javascripthtmlcssajax

Using the ternary operator in PHP to output various statuses depending on an event's status in a SQL database

When the status is 1, it's referred to as an "Active Insurance Event," and when it's 2, it becomes a "Completed Insurance Event." if(!empty($ins_event)) { echo "<tr><td>&nbsp;<img src='/check-icon. ...

phphtmlsqlcss

Displaying a pop-up to reveal what lies in the background

Whenever I display a popup, the decorative circle appears. I am unsure of how to address this issue. Here is the fiddle link: some code https://jsfiddle.net/MagikMike/pctb9e0n/ Appreciate any help, thank you! ...

htmlcsspopup

A foolproof guide to effortlessly incorporate an image into your banner while ensuring its perfect alignment even with varying screen widths

I'm facing an issue with adding a photo to the banner on my webpage. Currently, the photo remains in the same position within the banner regardless of screen size. However, I want it to stay right above my logo even when the screen size changes. How c ...

htmlcss

Maximizing page space with ReactJS and advanced CSS techniques

I'm currently in the process of learning CSS and struggling a bit with it. My main issue right now is trying to make my react components fill the entire height of the browser window. I've been using Display: 'grid' and gridTemplateRows: ...

javascriptcssreactjs