media query min and max for all devices

/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* Styles */
    section#clients-say::after {
        content: ' only screen and (min-device-width: 320px) and (max-device-width: 480px)';
    }
}


/* Smartphones (landscape) ----------- */

@media only screen and (min-width: 321px) {
    /* Styles */
    .footer-nav ul.list-inline {
        display: inline-flex;
        display: -webkit-inline-box;
    }
    .say-card {
        border-radius: 60px;
    }
    section#clients-say::after {
        content: ' only screen and (min-width: 321px) ';
    }
}


/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 320px) {
    /* Styles */
    section#clients-say::after {
        content: ' only screen and (max-width: 320px)';
    }
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* Styles */
    section#clients-say::after {
        content: 'iPads (portrait and landscape)';
    }
}


/* iPads (landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Styles */
    section#clients-say::after {
        content: 'iPads (landscape)';
    }
}


/* iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* Styles */
    section#clients-say::after {
        content: ' iPads (portrait)';
    }
}


/**********
    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 */
    section#clients-say::after {
        content: 'iPad 3';
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and ';
    }
}


/* Desktops and laptops ----------- */

@media only screen and (min-width: 1224px) {
    /* Styles */
    .footer-nav ul.list-inline {
        display: block;
    }
    section#clients-say::after {
        content: 'Desktops and laptops ';
    }
}


/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
    /* Styles */
    section#clients-say::after {
        content: ' Large screens';
    }
}


/* 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 */
    section#clients-say::after {
        content: 'iPhone 4';
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)';
    }
}


/* 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 */
    section#clients-say::after {
        content: 'iPhone 5 ';
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'screen and (min-device-width: 320px) and (max-device-height: 568px) and';
    }
}


/* iPhone 6, 7, 8 ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'Phone 6, 7, 8)';
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: '(min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)';
    }
}


/* iPhone 6+, 7+, 8+ ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: 'iPhone 6+, 7+, 8+';
    }
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: ' (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) ';
    }
}


/* iPhone X ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: ' iPhone X -)';
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: '(min-device-width: 375px) and (max-device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)';
    }
}


/* iPhone XS Max, XR ----------- */

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: 'iPhone XS Max, XR ';
    }
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: '(min-device-width: 414px) and (max-device-height: 896px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)';
    }
}


/* 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 */
    section#clients-say::after {
        content: ' Samsung Galaxy S3 ';
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    section#clients-say::after {
        content: '(min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) { ';
    }
}


/* 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 */
    section#clients-say::after {
        content: 'Samsung Galaxy S4';
    }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: ' 640px) and (orientation: portrait';
    }
}


/* 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 */
    section#clients-say::after {
        content: 'orientation: landscape';
    }
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    /* Styles */
    section#clients-say::after {
        content: 'orientation: portrait';
    }
}


Leave a Reply