The search bar lowers down for no clear reason

[norogoth]

I am a full-stack web developer looking for open-source projects to contribute to. I was looking into making a minor CSS edit to improve the responsibility of the header.

The Issue
When I resize the window by shortening it to 747 or lower in length, the search bar will drop down.

Attempting to look for solution
I noticed that the search element has the following HTML

<input type="search" class="form-control" name="search" id="search" size="30" value="" placeholder="Search">

I searched for the class "form-control" in ranetto.css for options but could not find that class. Am I looking in the wrong place to help with this issue?

[ryanlelek]

Hello 👋
You're in the right place.

The ".form-control" styles are probably coming from another, non-Raneto, CSS file.
It's probably from Bootstrap.
Because Raneto's CSS loads after Bootstraps, you can override it.
"form-control" does not exist yet, so you'll need to add it and you'll be off and running.

.form-control {
  /* Custom CSS Here */
}

However, because form-control is shared with many different elements, try to be specific on the id if you just want to affect the search bar and only the search bar.
There might be rules already for #search in Raneto's CSS

So things would look more like

#search {
  /* Custom CSS Here */
}

Hope that helps!

[norogoth]

I have a solution but I cannot seem to get this bar centered when it collapses to a single column.

I am using
css @media only screen and (max-width: 470px) { #search-and-login { align-items:baseline; } }