web responsiveness not working on zooming - php

Question

i made one site,it's looks like this with 100% zoom.
and with 25% zoom
so,question is when i do 25% zoom it will make my font smaller but not the image(slider) how it can be done?please help me.my code is here...
<?php include('header.php');?>
<!------ Slider_bg ------------>
<div class="slider_bg">
<div class="wrap">
<!------ Slider------------>
<div class="slider" style="margin-top:-5px;">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
$qur="SELECT img FROM home_slider";
$res=mysql_query($qur);
while ($row=mysql_fetch_array($res)) {
?>
<img src="admin/public/img/home_slider/<?php echo $row[0];?>" data-thumb="" alt="" />
<?php
}
?>
</div>
</div>
</div>
<!------End Slider ------------>
<div class="about-info">
<center>Welcome to AARYA-VEER Campus</center>
<p>Since its inception in the year of 2014, we made a constant endeavourto provide quality education and a platform for overall development to the students.</p>
<p>This institute is recognized by All India Council of Technical Education (AICTE) and affiliated with Gujarat Technological University(GTU).</p>
<p>Situated on the out-skirts of Rajkot City, Aaryaveerhas a sprawling and green campus of 27 acres with excellent infrastructure. The AaryaveerCampus is well connected through road with Private Buses and private operators plying from city. The fully residential campus offers students a peaceful and conducive study environment along with facilities like hostel, mess, canteen, indoor & outdoor sports center.</p>
<p>The education pattern at Aaryaveerhas a right blend of academia and industry with professionals, mentors, and advisors interacting with student throughout the year, offering enormous opportunities to our students for live projects, internships and placements.</p>
<p>Aaryaveer strives to provide rich and complete study experience to its students through cutting –edge amenities, research and innovation, that will assist students in building a successful professional path.</p>
</div><br><br>
<div class="clear"></div>
<div class="transpo1_head">
<h3>Approved By AICTE</h3>
</div>
<div class="transpo1_head">
<h3>Affiliated To GTU</h3>
</div>
<div class="transpo1">
<img src="web/images/AICTE.png" width="160" height="175">
</div>
<div class="transpo1">
<img src="web/images/GTU.png" width="160" height="175">
</div>
</div>
</div>
</div>
<!--main-->
<div class="main_bg">
<div class="main_btm">
<div class="wrap">
<div class="main_home">
<div class="gallery">
<h3>Photo Gallery</h3>
<ul>
<?php
$qur="SELECT img FROM gallery LIMIT 6";
$res=mysql_query($qur);
while ($row=mysql_fetch_array($res)) {
?>
<li><img src="admin/public/img/gallery/<?php echo $row[0];?>" alt=""></li>
<?php
}
?>
</ul>
</div>
<div class="see_more">
<span><font color="#FC2B5F">See More...</font></span>
</div>
<script type="text/javascript" src="web/js/jquery.lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="web/css/lightbox.css" media="screen">
<script type="text/javascript">
$(function() {
$('.gallery a').lightBox();
});
</script>
<div class="terminals">
<h3>Addmission Procedure</h3>
<p>Admission to the Institute is done through centralized admission procedure by Joint Admission Committee for Professional Courses (JACPC), Ahmedabad, of State Government for 100% seats as per the rules & regulations.. For more information,</p>
<font color="#FC2B5F">See More...</font>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<?php include('footer.php');?>
and css for that is.
.slider{
position:relative;
}
.theme-default .nivoSlider {
position:relative;
background:#fff url(../images/loading.gif) no-repeat 50% 50%;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding-top:10px;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:15px;
height:15px;
background:#999999;
border-radius:2em;
text-indent:-9999px;
border:0;
margin:0 4px;
}
.theme-default .nivo-controlNav a.active,.theme-default .nivo-controlNav a:hover{
background:#e1184a;
}
.theme-default .nivo-directionNav a {
display:block;
width:40px;
height:40px;
background:url(../images/l-r-arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:0px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
background-position:-40px 0;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
background:url(../images/prev.png) no-repeat;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
position: absolute;
bottom:25px;
right: 44px;
z-index: 9;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
#media all and (max-width:320px) {
.nivo-controlNav {
bottom:5px;
}
}

Answer 1

It is clear to see that your slider takes up the same percentage of the screen in both cases. We would need to see the CSS for the slider, but essentially just change % values to absolute ones.