0

How to responsive ?

mobile web design

6th Oct 2017, 1:02 AM
Miftah smartsystem
Miftah smartsystem - avatar
7 Answers
6th Oct 2017, 2:16 AM
Ankit Agrawal
Ankit Agrawal - avatar
+ 2
Javascript does it all. And add CSS
6th Oct 2017, 3:03 AM
👑 Prometheus 🇸🇬
👑 Prometheus 🇸🇬 - avatar
0
Use Bootstrap
6th Oct 2017, 4:54 AM
Abhishek Kumar Singh
Abhishek Kumar Singh - avatar
0
Responsive web design provides an optimal experience, easy reading and easy navigation with a minimum of resizing on different devices such as desktops, mobiles and tabs, Responsive web design uses only HTML and CSS , it is not a program or a JavaScript. When you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen it is called Responsive Web Design.
6th Oct 2017, 7:11 AM
Rishita
Rishita - avatar
0
Example- <!DOCTYPE html> <html> <head> <meta name="viewport" content="width= device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } /* Creates three columns of equal width */ .columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } /* Add shadows on hover */ .price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) } .price .header { background-color: #111; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #eee; font-size: 20px; } .button { background-color: #48d1cc; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } /* Changes the width of the three columns to 100% (to stack horizontally on small screens) */ @media only screen and (max-width: 600px) { .columns { width: 100%; } } </style> </head> <body> <h2>Responsive Pricing Tables</h2> <div class="columns"> <ul class="price"> <li class="header">Basic</li> <li class="grey">₹ 600 / year</li> <li>12GB Storage</li> <li>12 Emails</li> <li>12 Domains</li> <li>12GB Bandwidth</li> <li class="grey"><a href="#" class="button"> Sign Up</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header" style="background-color: #48d1cc">Pro</li> <li class="grey">₹ 1800 / year </li> <li>25GB Storage</li> <li>25 Emails</li> <li>25 Domains</li> <li>24GB Bandwidth</li> <li class="grey"><a href="#" class="button"> Sign Up</a></li> </ul> </div> <div class="columns"> <ul class="price"> <li class="header" >Premium</li> <li class="grey">₹ 4000 / year </li> <li>80GB Storage</li> <li>80 Emails</li> <li>80 Domains</li> <li>40GB Bandwidth</li> <li class="grey"><a href="#" class="button"> Sign Up</a></li> </ul> </div> </body> </html>
6th Oct 2017, 7:13 AM
Rishita
Rishita - avatar
0
wow thank you so much Guys , so Usefull😊
15th Dec 2017, 12:24 PM
Miftah smartsystem
Miftah smartsystem - avatar
- 1
with help of Jquery css3 & html5 u build responsive website anything else replay me@Vinay.s
6th Oct 2017, 2:52 AM
Vinay.s
Vinay.s - avatar