html - responsive div width in a responsive page without using another media query -

i have section in html page has ground image, title text @ left , sign form right.

i using media queries make responsive. facing problem before media queries triggered.

when screen size 768+px (as in fiddle, before form slips next line), width of title fine @ 15% (as avoids overlap woman's face in image , form). screen size enlarged, seems less , lines can in same line.

this happens when there media query screen sizes between 506px , 768px.

is there way can fix without having use anotehr media query?

any appreciated.

thanks,

<section class="imageform">  <div class="container"> <div class="title"> <h1>  title title title title </h1> <h3> title title title, title title </h3>  </div>  <form class="signup_form">   <label for="name"><strong> name:</strong></label>  <input type="text" id="name_first" name="name_first" required>  <input type="text" id="name_last" name="name_last" required>      <label for="email">email address:</label>  <input type="email" id="email" name="email" vrequired>   <label for="regpassword">password:</label><input type="password" id="regpassword" name="regpassword" required> </form>   </section>  <!--end of imageform section --> 

js fiddle: http://jsfiddle.net/fwkqos0c/6/

a simple solution here sent relative font size on title class. relative mean em's. means title font size automatically adjusts parent object's size.

more help:

http://css-tricks.com/why-ems/

(if answer helped i'd grateful approval)