Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

css help

Posted on 2014-07-29
5
Medium Priority
?
137 Views
Last Modified: 2014-09-01
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
0
Comment
Question by:coolispaul
  • 2
  • 2
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40227082
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
 

Author Comment

by:coolispaul
ID: 40227095
sure but that covers the whole screen then which i dont want...

Thanks
0
 
LVL 58

Expert Comment

by:Gary
ID: 40227124
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
 
LVL 11

Accepted Solution

by:
Murfur earned 2000 total points
ID: 40227497
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
 
LVL 11

Expert Comment

by:Murfur
ID: 40227498
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

885 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question