How to create a mobile responsive web page

A responsive design of a web page is required for a good viewer experience on mobile hand held devices. The web page must look nice on mobile hand held devices. The fonts should be scaled up and other elements of the web page should fit inside the mobile device. To enable this responsive web page design is required

This article will describe in detail about creating a responsive web page. Begin by adding the following code in the head section of your web page

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You will desire that the font size scales up on the mobile device. To do that add the following code to the head section of your web page

<style>
@media only screen and (max-width: 700px) {

   body { 
      font-size: 4.5vw; 
   }
   .button{font-size: 4vw !important;max-width:80%;text-align:left;}
}
</style>

Creating responsive images and div element, Add the following code

<style>
div {
  max-width: 767px;
  margin: auto;
  padding:10px;
}
.responsive {
  max-width: 80%;
  height: auto;
}
</style>

For creating responsive navigation menu browse this article on my website. Click Here

That is all.

If you liked this article please do leave a reply and share it with friends.

Thanks.