Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Posted by Thania Abrahams
Thania Abrahams
972 Points

How do I create a search box that is responsive if I want to place it at the top right corner of my website?

Hi there

I want to be able to create a simple search box that sits on the top right corner of my website but I also want it to be responsive, how would I code this?

css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}
Chase Lester
Chase Lester
10,972 Points
Chase Lester
Chase Lester
10,972 Points

Do you have an example from another site you are wanting to replicate, or have something similar?

2 Answers

Chase Lester
Chase Lester
10,972 Points
Chase Lester
Chase Lester
10,972 Points

That site you gave is pretty straight forward with a tutorial on getting that effect. Here is a code pen I put together from that web page with example a. If you are wanting example b, and are having a hard time putting together the code, I can assist a bit more.

http://codepen.io/anon/pen/rOLrXm

Basically you have your css defining your input box, then when a user clicks into it, the css defines a transition between the first state and the active state of the css, which expands the box.

If you want to get this into the top right of your web page, you can use absolute positioning to do so.

Alen Subasic
Alen Subasic
12,279 Points
Alen Subasic
Alen Subasic
12,279 Points

Could you also include your HTML? I see the CSS but we would need the HTML to fully understand where you are coming from.

Thania Abrahams
Thania Abrahams
972 Points

Thank you so much for responding! I wanted to create something like the example shown here: http://webdesignerwall.com/tutorials/expandable-mobile-search-form but I do not understand the code at all. I did, however, google know like basic sytax for forms: <form action=""> <input type="text" name="search" placeholder="search here..."> <input type="submit" value="search/"> </form>