How to responsive ?

mobile web design

html

6th Oct 2017, 1:02 AM

Miftah smartsystem

7 Antworten

+ 2

https://www.sololearn.com/discuss/765806/?ref=app

6th Oct 2017, 2:16 AM

Ankit Agrawal

+ 2

Javascript does it all. And add CSS

6th Oct 2017, 3:03 AM

👑 Prometheus 🇸🇬

Use Bootstrap

6th Oct 2017, 4:54 AM

Abhishek Kumar Singh

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

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

wow thank you so much Guys , so Usefull😊

15th Dec 2017, 12:24 PM

Miftah smartsystem

- 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