Display Size Compatibility Into Any Smart Phone Device or Tablet Using CSS3 in ASP.NET

Introduction

In this article I will explain how to make an ASP.Net web application a responsive UI. That means the website will fit into any device apart from a desktop.

Content

Normally in a mobile device when we run website pages, most often the pages do not fit in the screen, which means it's not properly aligned; we have to scroll horizontally very often. It is the same as when we resize a browser and squeeze it small; the webpage can become cut off like in the following picture.

Now I will share a smart trick with you.

If you don't have a mobile simulator (Windows, Apple, Android) to test your web application, then don't worry; just drag your browser and squeeze it just like a mobile phone with a width size of say 320px. Then if your web page fits then that means all your page content will not be cut off; you win the jackpot.

So for achieving this we have to design our web page's controls in such a manner that they fit in the width and alignment for any media screen size.

Now here is where the power of CSS3 comes (normally we know CSS2). In CSS3 we have a property name "MEDIA QUERY".

"By using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself"; that means we will apply this CSS into our web controls. So the control will adjust its width according to the device.

Note: The CSS3 is supported only by Chrome, Mozilla 4+, Safari and I.E 9.

The media query syntax will be the following:

t@media screen and (max-width:999px)
{
}

Now I will create a small web application where we will implement this css3media screen property.

Step 1: Create an ASP.Net web application.

Step 2: Now in our application we have a Parent DIV say <div id="container">

Inside this div we have the following 3 child div:

<div id="nav">
<div id="content">
<div id="extras">

Under Each DIV we have different content say text, image like the following code segment.

Create a style sheet file into your web project (say query.css) and make a style sheet for each image and div including the parent div just like in the following code segment.

Now in the stylesheet, apply the media query CSS3 property like the following code segment:

See here, first I have mentioned the media screen max width property with 380px. Normally in a full-scale browser the pix will be 1200+px. So when we squish the browser and drag the width smaller and make it like a smartphone screen width then the browser screen width pix will be (below 320px).

After that I am doing the main div(#container) size it into 300 px and also making other div (nav, content, extrax) and ".feature-image" into width=auto, float =none, margin=0.

Now after running the application in a Chrome browser and making the browser width just like a tablet width by making it sqiz, the application will look like the following picture.

See here, the image with content is not being cutting out. Now we will make the browser width smaller (300px) like a standard smartphone screen width by resizing the browser. See the result in the following picture.

See the width of the browser. It's just similar to any standard smartphone screen width. And see, all the content in the web pages are not being cut off. It fits the alignment width of the browser; even the image also. It's all about the CSS3 magic of media screen. Don't test this application into any I.E. browser with a version lower than 9; CSS3 is supported only by I.E. 9 and above. I have attached the project file also here.

Conclusion

So in this article we get to know making ASP .Net web application display size compatibility into any Smart Phone device or tablet using CSS3.