Responsive List Items | Lessoncup Programming Blog

Wednesday, 25 December 2013

Responsive List Items

Hi, today i am going to tell you about Responsive List of Image with content, we have seen many e-commerce websites and product related sites like image with content, based on the screen sizes the image and content will adjust there sizes and look in readable view. i have done this in simple way and this sample CSS code will help you to create beautiful Responsive Productive view with Image & content, let's see how we do this.


HTML

in html just create the List of items with some content and image
<div class="lessoncup">

<ul>
<li>
<img src="a.jpg"> Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. 
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</li>
<li><img src="a.jpg">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. 
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</li>
<li><img src="a.jpg">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. 
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</li>
<li><img src="a.jpg">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. 
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</li>
<li><img src="a.jpg">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. 
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</li>
<li><img src="a.jpg">Hi! Introducing myself as Lesson Cup. I am an arena where people can visit by typing www.lessoncup.com from any where in the world. The purpose of my birth is to give solutions in JQuery, Ajax, CSS3, My Sql, Html5, Javascript and PHP. 
Coming to my Author Mr.Mohammad Khasim is a web designer and a developer who has got vast experience in giving solutions on JQuery, Ajax and PHP from small websites to big portals and high performing enterprise web applications. The innet passion to teach people has provoked him to introduce me to this world to fulfill his desire. Thanks a lot !!!</li>
</ul>

</div>

CSS

here give the normal style to your List Boxes as you like, next define the @media screen and (max-width: 800px) {} inside the curly brace write the new style to your List Boxes how it will look in 800px width, like this write different styles as par the different screen sizes. i have written few sizes in different looks.
.lessoncup{width:900px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:14px; line-height:22px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0 auto;}

.lessoncup ul li{ border-radius:5px; padding:5px; float:left; width:400px; background-color:#9C3; color:#FFF; margin-right:5px; margin-bottom:5px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;}

img{float:left; margin-right:5px; width:200px;}

/************************************************************************************
smaller than 800
*************************************************************************************/
@media screen and (max-width: 800px) {

.lessoncup{ width:800px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:12px; line-height:22px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0 auto;}

.lessoncup ul li{ border-radius:5px; padding:5px; float:left; width:360px; background-color:#9C3; color:#FFF; margin-right:5px; margin-bottom:5px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;}

img{float:left; margin-right:5px; width:200px;}

}

/************************************************************************************
smaller than 600
*************************************************************************************/
@media screen and (max-width: 600px) {

.lessoncup{width:600px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:12px; line-height:22px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0 auto; }

.lessoncup ul li{ border-radius:5px; padding:5px; float:left; width:250px; background-color:#9C3; color:#FFF; margin-right:5px; margin-bottom:5px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;}

img{float:left; margin-right:5px; width:150px;}

}


/************************************************************************************
smaller than 400
*************************************************************************************/
@media screen and (max-width: 400px) {

.lessoncup{width:400px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:12px; line-height:22px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0 auto; }

.lessoncup ul li{ border-radius:5px; padding:5px;  width:150px; background-color:#9C3; color:#FFF; margin-right:5px; margin-bottom:5px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;}

img{margin-right:5px; width:100px;}

}


/************************************************************************************
smaller than 300
*************************************************************************************/
@media screen and (max-width: 300px) {

.lessoncup{width:300px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:12px; line-height:22px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0 auto; }

.lessoncup ul li{ border-radius:5px; padding:5px;  width:200px; background-color:#9C3; color:#FFF; margin-right:5px; margin-bottom:5px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;}

img{margin-right:5px; width:200px;}

}

Live Demo   Download Script

1 comment :

  1. Horizontal Scroll bar is visible in all the smaller screens. need to fix that.

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons