Responsive CSS
Add Bellow code to your css bottom area. There are different portal for responsive design. Here we discuss all the pixel size for mobile or tab or desktop section. Remember CSS files priority come by top to bottom. So last css add before header tag gets most priority. Better to add those code in your css which is added last of header tag. /* 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 /
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/ Styles /
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/ 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 (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/ Styles /
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/ Styles /
}
/ iPhone 5 ----------- /
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/ Styles /
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/ Styles /
}
/ iPhone 6 ----------- /
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/ Styles /
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/ Styles /
}
/ iPhone 6+ ----------- /
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/ Styles /
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/ Styles /
}
/ Samsung Galaxy S3 ----------- /
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/ Styles /
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/ Styles /
}
/ Samsung Galaxy S4 ----------- /
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/ Styles /
}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/ Styles /
}
/ Samsung Galaxy S5 ----------- /
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/ Styles /
}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/ Styles */
}