That describes how you can include code in a CSS stylesheet that will apply designated rules only if the device screen (or browser viewing area) meets certain criteria. For example (from the article):
@media only screen and (max-width: 999px) { /* rules that only apply for canvases narrower than 1000px */}
@media only screen and (device-width: 768px) and (orientation: landscape) { /* rules for iPad in landscape orientation */}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* iPhone, Android rules here */}
/*show small-size sections (by hiding full-size sections) – must apply to a full-width section*/
@media screen and (max-width: 1023px) {
.full-size {
display: none;
}
}
/*show full-size sections (by hiding small-size sections) – must apply to a full-width section*/
@media screen and (min-width: 1023px) {
.small-size {
display: none;
}
}
/* show mobile header, hide main*/
@media screen and (max-width: 1023px) {
.header-main {
display: none;
}
}
/* show main header, hide mobile*/
@media screen and (min-width: 1023px) {
.header-mobile {
display: none;
}
}
@media screen and (max-width: 960px)
{
#features {display: none; }
}
@media screen and (min-width: 960px)
{
.mobileonly { display: none; }
}
…………………
What it means:
/*hide ubermenu, show mobile menu*/
@media screen and (max-width: 1023px)
{#widgetizer31qgcy, #textboxeat9gi {display: none; }
}
/*hide mobile menu, show ubermenu*/
@media screen and (max-width: 1023px)
{#pl_area184d77 {position: relative; top: 0px !important;}
}
/*hide background image under 500px*/
@media (max-width : 500px) {
#pl_area229ee6 .pl-content {
background-image: none;
}
}