Set auto height and width in CSS/HTML for different screen sizes

#Set auto height and width in CSS/HTML for different screen sizes

Larger Device, Medium Devices & Small Devices media queries. (Work in my Scenarios.)

Below media queries for generic Device type: – Larger Device, Medium Devices & Small Devices. This is just basic media types which work for all of scenario & easy to handle code instead of using various media queries just need to care of three media type.

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}

How to auto adjust the div size for all mobile / tablet display formats?

This is called Responsive Web Development(RWD). To make page responsive to all device we need to use some basic fundamental such as:-

1. Set the viewport meta tag in head:

<meta name=”viewport” content=”width=device-width,height=device-height,initial-scale=1.0″/>

2.Use media queries.

Example:-

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

/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* 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) {
/* Styles */
}

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

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

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

/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

3. Larger Device, Medium Devices & Small Devices media queries. (Work in my Scenarios.)

Below media queries for generic Device type: – Larger Device, Medium Devices & Small Devices. This is just basic media types which work for all of scenario & easy to handle code instead of using various media queries just need to care of three media type.

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}

PageSpeed: Leverage browser caching

PageSpeed: Leverage browser caching

Find your .htaccess file in the root of your domain. This file is a hidden file but should show up in FTP clients like FileZilla or CORE. You can edit the .htaccess file with notepad or any form of basic text editor.




In this file we will set our caching parameters to tell the browser what types of files to cache.




## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access plus 1 year"

ExpiresByType image/jpeg "access plus 1 year"

ExpiresByType image/gif "access plus 1 year"

ExpiresByType image/png "access plus 1 year"

ExpiresByType text/css "access plus 1 month"

ExpiresByType application/pdf "access plus 1 month"

ExpiresByType text/x-javascript "access plus 1 month"

ExpiresByType application/x-shockwave-flash "access plus 1 month"

ExpiresByType image/x-icon "access plus 1 year"

ExpiresDefault "access plus 2 days"

</IfModule>

## EXPIRES CACHING ##




Source: https://gtmetrix.com/leverage-browser-caching.html

Meta tags for social share links or images

Facebook Meta Tags


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<title></title>

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

<meta name="keywords" content="" >

<meta name="description" content="">

<!--FACEBOOK-->

<meta property="og:title" content="" >

<meta property="og:site_name" content="">

<meta property="og:url" content="" >

<meta property="og:description" content="" >

<meta property="og:image" content="" >

<meta property="fb:app_id" content="" >

<meta property="og:type" content="website" >

<meta property="og:locale" content="" >


L

## Twitter Social meta tags

<!--TWITTER-->

<meta property="twitter:card" content="summary" >

<meta property="twitter:title" content="" >

<meta property="twitter:description" content="" >

<meta property="twitter:creator" content="" >

<meta property="twitter:url" content="" >

<meta property="twitter:image" content="" >

<meta property="twitter:image:alt" content="" >




-------------------------

## Google+ meta tags 

<!--GOOGLE+-->

<link rel="author" href="">

<link rel="publisher" href="">