Slideshow resizing for media queries - css

Question

i have a slideshow built on my landing page but, what i am wanting to do is have that slideshow scale down and scale in relation to the page. i have managed to do this with all other divs/content it is just this pesky slideshow that's not doing as it is told. It is probably something very simple but i have been staring at this site a bit TOO much now.
css:
.slideshow {
margin: 0px 5px 5px 5px;
position: relative;
width: 920px;
height: 610px;
}
#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8 {
position: absolute;
width: 520px;
height: 156px;
padding: 227px 200px 227px 200px;
text-align: center;
color: #FFF;
}
#slide1 {
position: absolute;
width: 520px;
height: 20px;
padding: 295px 200px 295px 200px;
text-align: center;
color: #FFF;
}
Snippet of HTML:
<!--Slideshow-->
<div class="slideshow">
<!--We design and communicate-->
<div id="slide1">
<span style="line-height: 120%; color: #FFF; font-size: 20px; font-weight: normal;">
We are a design and communication agency.
</span>
</div>
<div id="slide3"><a href="about/how-we-work.htm">
<span style="line-height: 120%; color: #FFF; font-size: 20px; font-weight: normal;">
We create.
<br>
<br>
branding / web design / packaging / events / press launches / interiors / installations
<br>
<br>
<span style="border-bottom: solid 3px #FFF;">
our process
</span>
</span>
</a></div>
<!--Bloom and Blossom-->
<div id="slide2"></div>
<!--Elkin-->
<div id="slide4"></div>
<!--GKFW-->
<div id="slide6"></div>
<!--Swarovski-->
<div id="slide7"></div>
<!--ASOS-->
<div id="slide8"></div>
</div>
my aim is to have this taking up 100% width like all the other divs.
Thanks if anyone can help and apologies in advance for some appalling coding! hah u__u been out the game too long.
this is the MQ stylesheet that i have:
.slideshow {
margin: 0 5px 5px 5px;
position: relative;
width:98%;
}
#slide2, #slide3, #slide4, #slide6, #slide7, #slide8 {
position: absolute;
width: 98%;
margin: 0px 5px 5px 0;
text-align: center;
color: #FFF;
}
#slide1 {
position: absolute;
width: 98%;
height: 20px;
margin: 0 5px 5px 0;
text-align: center;
color: #FFF;
}
there is also a wrapper which is 100% width

Answer 1

You fixed heights and widths in pixels. Change them to percentages.
Pixels doesn't scale down. A pixel is a pixel and percentage is the relative one.
So fix heights and widths in percentages