Jump to content

Making Images Slideshow responsive in CSS


Jaytech

Recommended Posts

Hey all, I have got a jquery slideshow on my website which am trying to make the images in it responsive so that they can fit on tablets and mobile device screens, but it doesn`t work as expected. Kindly assist?

HTML

  <div id= "hero">

         <div id= "pager"> </div>
         <div id= "pause"> ≈ </div>
         <div id= "play"> Δ</div>
         <div id= "next"> 〉 </div>
         <div id= "prev"> 〈 </div>

          <div id= "slider">

                 <div class= "items">
                         <img src= "images/hp.jpg" alt="HP Computers" id="img">

                            <div class = "info">

                               <h2> HP Computers </h2> 

                               <p> We deliver all type of HP laptops <a href= "laptops.html" class="link2"> Learn more </a> </p>

                            </div> <!--End_info-->
                 </div> <!--End_items-->


                <div class= "items">
                         <image src= "images/mobile.jpg" alt="Mobile Phones">

                            <div class = "info">

                               <h2> Mobile Phones</h2> 

                               <p> We create all kinds of mobile websites <a href= "mobile.html" class="link2"> Learn more </a> </p>

                            </div> <!--End_info-->
                 </div> <!--End_items-->     

                <div class= "items">
                         <image src= "images/photography.jpg" alt="Photography Portfolio Designs">

                            <div class = "info">

                               <h2> Photography Brochures </h2> 

                               <p> We create unique, responsive and amazing photography portfolio <a href= "photography.html" class="link2"> Learn more </a> </p>

                            </div> <!--End_info-->
                 </div> <!--End_items-->     

                 <div class= "items">
                         <image src= "images/graphic_design.jpg" alt= "Graphics Design">

                            <div class = "info">

                               <h2> Graphics Designs </h2> 

                               <p> We create amazing graphic contents for your project or institution <a href= "graphic_design.html" class="link2"> Learn more </a> </p>

                            </div> <!--End_info-->
                 </div> <!--End_items-->


        </div> <!--End_slider-->


    </div> <!--End_hero-->

<script type="text/javascript" src= "jquery-1.12.3.js"> </script>
<script type="text/javascript" src= "jquery.cycle.all.js"> </script>
<script type="text/javascript" src= "test.js"> </script>

CSS

/*Screen size of laptop and Desktop monitors.*/
@media screen and (min-width: 1024px){

    /*Index page Slideshow styles*/
    #hero{
         width: 550px;
         height: 250px;
         border: 2px solid brown;
         box-shadow: 7px 7px 7px;
         display: block;
         position: relative;
         margin: auto;
    }

    #slider{
         width: 550px;
         height: 250px;
         display: block;
         position: absolute;
         overflow: hidden;
    }
    .info {
         width: 550px;
         height: 100px;
         display: block;
         position: relative;
         bottom: 100px;
         background: rgba(102,204,204,.2);
         z-index: 50;
    }

    .info h2 {
        font-family: sans-serif;
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        padding: 28px 0 0 15px;
    }

    .info p {
        font-family: sans-serif;
        font-size: 13px;
        font-weight: lighter;
        color: #ffffff;
        padding: 0 0 0 15px; 
        line-height: 1px;
    }
}

/* Screen size of a tablet and below.*/
@media screen and (max-width: 1024px){
/*Index page Slideshow styles*/
#hero{
     width: 98%;
     background-size: auto;
     height: 250px;
     border: 2px solid brown;
     box-shadow: 7px 7px 7px;
     display: block;
     position: relative;
     margin: auto;
}

#slider{
     width: 98%;
      background-size: auto;
     height: 250px;
     display: block;
     position: absolute;
     overflow: hidden;
}
.info {
     width: 98%;
     height: 100px;
     display: block;
     position: relative;
     bottom: 100px;
     background: rgba(102,204,204,.2);
     z-index: 50;
}

.info h2 {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    padding: 28px 0 0 8px;
}

.info p {
    width: 98%;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: lighter;
    color: #ffffff;
    padding: 0 0 0 8px; 
    line-height: 1px;
}
}

/*Screen size of a phone in potrait and landscape mode.*/
@media screen and (max-width: 480px){
#hero{
width: 98%;
border: 2px solid brown;
box-shadow: 3px 3px 3px;
display: block;
position: relative;
margin: auto;
}

#slider{
width: 98%;
display: block;
position: absolute;
overflow: hidden;
}
.info {
     width: 98%;
     display: block;
     position: relative;
     bottom: 100px;
     background: rgba(102,204,204,.2);
     z-index: 50;
}

.info h2 {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    padding: 28px 0 0 5px;
}

.info p{
    opacity: 0;
}
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...