I am trying to make some divs responsive - html

Question

I am trying to make some divs responsive.It's a joomla module actually. But it isn't responsive. My template is responsive. I put that module in a position but if resize the screen it gets bigger and it goes outside that position.
I started with the first div (YJYC container) and I set the width to 100%. This is a good start, becouse I noticed that if I resize the screen, the result is "good". But I have to do this at the other divs, right?.
How should I continue?
Here is the html
<div id="YJYSC_container<?php echo $container_poz ?>" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width ?>px;">
<!-- navigator -->
<div id="navigator_outer" style="height:<?php echo $slider_height ?>px; width:<?php echo $thumb_width +30 ?>px;">
<ul id="navigator">
<?php foreach ($yousclides as $youscslide):?>
<li class="element" style="height:<?php echo $slider_height / $visibleItems ?>px">
<div class="inner" style="width:<?php echo $thumb_width + 30 ?>px;height:<?php echo $slider_height / $visibleItems ?>px">
<div class="inner_over" style="width:<?php echo $thumb_width +30 ?>px;height:<?php echo $slider_height / $visibleItems -12 ?>px">
<div class="border_out" style="height:<?php echo $slider_height / $visibleItems -20 ?>px;width:<?php echo $thumb_width + 0 ?>px;">
<div class="border_in" style="height:<?php echo $slider_height / $visibleItems -20 ?>px;width:<?php echo $thumb_width + 0 ?>px;">
<?php if($youscslide['img_url'] != "") echo $youscslide['img_tumb']; ?>
</div>
</div>
</div>
</div>
</li>
<?php endforeach;?>
</ul>
</div>
<!-- end of navigator, start slides -->
<div id="slides" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width ?>px;">
<?php foreach ($yousclides as $youscslide):?>
<div class="slide" style="height:<?php echo $slider_height ?>px; width:<?php echo $slider_width ?>px;"> <a href="<?php echo $youscslide['link'] ?>" title="">
<?php if($youscslide['img_url'] != "") echo $youscslide['img_out'] ?>
</a>
<div class="long_desc" style="width:<?php echo $intro_desc_width ?>;height:<?php echo $intro_desc_height ?>;<?php echo $intro_desc_pozi ?>">
<h1><?php echo $youscslide['title'] ?></h1>
<?php echo $youscslide['intro'] ?> <?php echo JText::_('YOUSC_READ') ?> </div>
</div>
<?php endforeach;?>
</div>
</div>

Answer 1

Use this:
#media screen and (max-width: 900px) {
#YJYSC_container, #YJYSC_container_l {
width: 100% !important;
height: auto !important;
}
#YJYSC_container_l #navigator_outer {
position: relative !important;
width: 100% !important;
height: auto !important;
margin-bottom: 20px;
}
#YJYSC_container #slides, #YJYSC_container_l #slides {
width: 100% !important;
}
#YJYSC_container #slides div.slide, #YJYSC_container_l #slides div.slide {
width: 100% !important;
}
#YJYSC_container #navigator li.element div.inner, #YJYSC_container_l #navigator li.element div.inner,
#YJYSC_container #navigator li.element div.inner_over, #YJYSC_container_l #navigator li.element div.inner_over,
#YJYSC_container_l #navigator li.element div.inner div.inner_over .border_out,
#YJYSC_container #navigator li.element div.inner div.inner_over .border_in, #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_in,
#YJYSC_container #navigator li.element div.inner div.inner_over .border_in, #YJYSC_container_l #navigator li.element div.inner div.inner_over .border_in img{
width: 100% !important;
height: auto !important;
float: none !important;
}
#YJYSC_container #navigator li.element, #YJYSC_container_l #navigator li.element {
float: left;
width: 33% !important;
height: auto !important;
clear: none !important;
}
#YJYSC_container #navigator, #YJYSC_container_l #navigator {
overflow: auto !important;
}
}
This code triggers on devices with width under 900px. It still needs more work, but responsivity is starting to make sense.
Updated jsfiddle:
http://jsfiddle.net/gg9mvtrt/1/