css help


I have a dropdown for a search area that can be seen here:

click "search" in menu to reveal.

When you resize the browser down the search bar cuts off - any ideas how to fix?

Who is Participating?
MurfurConnect With a Mentor Full Stack DeveloperCommented:
I took out the extra div class="dropdown-container" and applied the relevant styles to the parent which seemed to work, also removing unrequired styles from dropdown-search.
<div style="background:url('/rooms/admin/resources/banner-real-rooms.jpg') no-repeat center">
  <div style="max-width: 1366px; height: 250px; background-color: #5284c4; margin: 0 auto;padding-top: 75px;" class="dropdown-search">
  	<div class="container">
    	<form id="form1_search" action="/rooms/search.php" method="get">
    		<input type="search" id="form1_q" name="q" class="searchtext">
    		<input type="submit" value="Search">
      <a class="close">Close</a>
  <span class="container">
  Real Rooms

Open in new window

The obvious solution would to make it 100% so it always covers your search form, as you have it now its a percentage of the screen width
coolispaulAuthor Commented:
sure but that covers the whole screen then which i dont want...

Over 1366px browser width it is 100% so I don't see the problem with it being 100% on smaller screen widths.

As you have it now it's not possible to style it properly where you are using a percentage based margin for the container and set widths for the content - it will always push out of the container
MurfurFull Stack DeveloperCommented:
Oh, have you fixed it? It seems to be fine now...

Also, forgot to say that I moved the search div inside the backgound image container so that it was relative
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.