How to Make Website Responsive for mobile devices?

Question: Why Responsive Web Design is the compulsary for websites?

1. Recommended By Google: Google have higher Preference for Responsive design as compare to Non-Responsive.
2. One Website, Many Devices: Single website can be viewable in desktop, laptop, ipad, different sizes of mobile.
3. Good for SEO
4. Responsive Website have more page views as compare to non-responsive.
5. It looks always better in different resolution.

Question: How to check website is responsive OR Not?
https://www.google.com/webmasters/tools/mobile-friendly/


Question: How can i make a existing website responsive?
You can make any website responsive. Just follow the simple steps.

1. Add Following code in head tag.
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Create a responsive.css file and include in all the pages.
3. Add Following code in responsive.css

   /* Smaller Resolution Desktops and Laptops */
   @media (max-width: 800px) {
          
          
   }
   /* Smaller devices like Ipad*/
   @media (max-width: 650px) {
   
          
   }
   /* Even Smaller devices like Mobile*/
   @media (max-width: 450px) {
   
          
   }
   /* Smallest Mobile devices */
   @media only screen and (min-device-width: 300px) and (max-device-width: 480px) {
          
          
   }

4. Now structure is ready, you just need to add css according to devices.
5. Note: In Responsive design you need to hide extra information of websit

Best Related Posts are Following:

1. CSS3 interview questions and answers for experienced.
2. CSS Interview Questions and Answers.