context​Sensitive​Content

*UPDATE 10/2/14

Use these standard bootstrap classes to show/hide content based on the screen size. You can use more than one at a time to show specific content on multiple screen sizes. Resize your browser window to see the content in the green box below change based on screen size.

Add any of these classes to your controls in the CMS to show them at the various sizes:

• visible-xs
• visible-sm
• visible-md
• visible-lg

Full specs for the visible classes on the bootstrap site.

Got comments, questions, suggestions? Email me at jnprevatte@gmail.com or connect with me on HUG.

Custom show/hide CSS based on HL breakpoints

Use this on your site

1. Copy and paste this CSS to your site.
2. Add the appropriate class or classes (context-lrg, context-med, etc.) to the content areas on your site.
3. They will now only be visible for the window sizes that you have added classes for.

[class*="context"] {
  padding: 20px 25px;
  display:none;
}
@media screen and (min-width : 1200px) {
  .context-xlrg {
    display:block;
  }
}
@media screen and (min-width : 992px) and (max-width : 1199px) {
  .context-lrg {
    display:block;
  }
}
@media screen and (min-width : 768px) and (max-width : 991px) {
  .context-med {
    display:block;
  }
}
@media screen and (min-width : 480px) and (max-width : 767px) {
  .context-sm {
    display:block;
  }
}
@media screen and (max-width : 479px) {
  .context-xsm {
    display:block;
  }
}