CSS Media Queries For All Common Devices

CSS Media queries are an outstanding way to provide distinctive styles to different devices that’s the most excellent experience for every user. A part of the CSS3 specification as the role of the media attribute has been extended by CSS media queries which helps to let you know that how to control the style you applied.

[css]
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}

/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}

/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}

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

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

WordPress Pagination Without A Plugin

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

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

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

Animated Tooltip with CSS3

/* iPhone 5 (portrait & landscape)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}

/* iPhone 5 (landscape)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}

/* iPhone 5 (portrait)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
[/css]

Create Short Code for Custom Post Type with WordPress Custom Plugin

View source →