Solved

css help

Posted on 2014-07-29
5
127 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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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 …

910 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now