I want to excuse for not flagging last post... I did not consider it... I hope this one does not need it ;)
I still got the same problem...
I had a certain problem. I have built a simple gallery, where images size is depend on the device resolution and hover effect shows detail information about the hovered photo. Images are scaling perfectly, but I had a problem with texts covering photos, which are not.
To change it, I used @media, but after that hover text is scaling only for established resolutions. My question is what to do, to have a text scaling down like a photo, when user change window browser size to custom?
<section id="gallery">
<ul class="large-block-grid-3 medium-block-grid-2 small-block-grid-1">
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_08.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_02.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_03.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_04.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_05.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_06.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_07.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_08.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_09.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_10.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_11.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
<li>
<div class="overlay"></div> <a href="#"></a>
<img src="http://fkdesign.pl/zurb/files/img_12.jpg" alt="Ocean" />
<div class="gallery-info">
<ul>
<li>
<h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>
</li>
<li>
<dl class="small-4 columns text-center"> <dt><span class="icon-heart3" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video"></span></dt>
<dd><span class="value">422</span>
</dd>
<dd><span class="name">likes</span>
</dd>
</dl>
<div class="small-4 columns text-center">
<img src="http://fkdesign.pl/zurb/img/sep.png" alt="" />
</div>
<dl class="small-4 columns text-center"> <dt><span class="icon-eye3"></span></dt>
<dd><span class="value">323</span>
</dd>
<dd><span class="name">views</span>
</dd>
</dl>
</li>
</ul>
</div>
</li>
</ul>
</section>
The following is the direction and solution to your problem:
I bet you want to do something similar to Paravel's FitText It is a jQuery plugin. You need to run jQuery to run it.
Instead of a complete code example, I leave the solution direction and space for you to explore first which can help you to learn in long run.