css help

Hi,

I have a dropdown for a search area that can be seen here:
http://dev.openwaterdesign.com/rooms/real-rooms/

click "search" in menu to reveal.

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

Thanks
coolispaulAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
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
0
coolispaulAuthor Commented:
sure but that covers the whole screen then which i dont want...

Thanks
0
GaryCommented:
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
0
MurfurFull 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">
			</form>
      <a class="close">Close</a>
    </div>
  
  </div>
  
  <span class="container">
<h1>
  Real Rooms
</h1>
</span>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

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.