Create Responsive HTML Theme in Minutes

Hello friends,

Today in Developer's Blog I will tell you the way to Create Responsive HTML Theme in Minutes.

Friends, most of us just focus on designing html only for web version and not for iPad, iPhone and other Mobile Phones.

Some of us don't know how to create responsive theme and some of us don't design it until our client asks us to do that.

But now a days, as we all know that we always like to keep our self online 24X7 just because we always want to be updated with everything. So we also visit the websites from our cell phones and in U.S., most of the persons uses iPhone and iPad to browse the website instead of Desktop PC. 

So we will have to design Responsive theme now and for that we will have to learn how to do that.

We will not have to do anything fancy to design responsive theme, we will just have to define min and max width of the screen in CSS and it will be applied in that particular device automatically.

So, we will start with the Small Phones with a resolution of 240 x 320.

@media screen and (min-width: 0px) and (max-width: 319px)
{
    // write your CSS here by having maximum width of 319px and it will work in Small Phones
}

Now we will write the CSS for iPhone with a resolution of 320 x 480.

@media screen and (min-width: 320px) and (max-width: 479px)
{
    // whatever CSS you defined for Small Phones will have to be defined here for iPhone.
}

Now we will write the CSS for Small Tablet with a resolution of 480 x 640.


@media screen and (min-width: 480px) and (max-width: 767px)
{
    // whatever CSS you defined above will have to be defined here for Small Tablet.
}


Now we will write the CSS for iPad (Portrait) with a resolution of 768 x 1024.


@media screen and (min-width: 768px) and (max-width: 979px)
{
    // whatever CSS you defined above will have to be defined here for iPad (Portrait).
}

Now we will write the CSS for iPad (Landscape) with a resolution of 1024 x 768.


@media screen and (min-width: 980px)
{
    // whatever CSS you defined above will have to be defined here for iPad (Landscape).
}

So by this you will be able to Create Responsive Theme which will work in all the Mobile Devices.

I hope this will help you and you will like it.

Don't forget to leave your comments.

Thank you
Ravinder