Thursday, May 16, 2013

How to make your design as "Responsive Design"


1. Adding Meta tags:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">


2.Internet Explorer 8 or older doesn't support media query. You can use media-queries.js or respond.js to add media query support in IE. 

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

3. Write compatible CSS code for the below ( may be in seperate file called media.css or responsive.css)

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Your Styles */
}

/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
/* Your Styles */
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Your Styles */
}

/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Your Styles */
}

/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
/* Your Styles */
}

/* Large screens */
@media only screen and (min-width : 1824px) {
/* Your Styles */
}

Will update more soon.......

Tuesday, May 7, 2013

Problem with "WWW."

Sometimes your website does not RUN if you add "www" in front of your domain name with especially hosted with Godaddy.

The solution is here.
1. Open your hosting control panel
2. Find and Go to "Domain Manger"
3. Please check your "A record" '@' is pointed to your site IP or domain.
4. Please add a "C Name" record for "www" which points to "@"
5. It will take minimum 24-48 hours to get update.