Jump to content

Making Images Slideshow responsive in CSS


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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...