Change Features for Mobile or Tablet Browsers

Often times the page you create will not fit properly in the window size for a specific browser. There is an easy way to give custom CSS commands based on the size (width) of the browser. You may ask yourself, why would I want to do this, so let me give you some examples. - The search form I added to my header didn't fit properly on Smart Phones. - The social icons in the menubar looked bad on Smart Phones - The page layout didn't fit on tablets, it was too wide - A navbar was too wide on tablets To customize your site for certain browser sizes use the following (note: you can feel free to change the values for the width to suit your needs): The code for controlling CSS based on screen width is as follows:

@media only screen and (min-width: XXX px) and (max-width: YYY px) {
  SOME_DEFINITIONS
}

You can remove the (min-width) or (max-width) options as necessary. For example:

For SmartPhones (like the iPhone)

/* FOR MOBILE SMARTPHONES ONLY  */
@media only screen and (max-width: 640px) {
  SOME_DEFINITIONS
}

For Tablets and Small Monitors

/* FOR TABLETS AND SMALL MONITORS) */
@media only screen and (min-width: 641px) and (max-width: 800px) {
  SOME_DEFINITIONS
}

For Large Monitors

Sometimes you want to re-enable features for large monitors and you can customize the CSS for large screens as well:

/* FOR LARGE MONITORS */
@media only screen and (min-width: 801px) {
  SOME_DEFINITIONS
}

Examples

/*  ================
      = SmartPhones        =
      ================
Hide the search form and social media links for mobile browsers */
@media only screen and (max-width: 640px) {
  .sm-search-form, .sm-page-widget-social-links { display: none; }
}

/* =============================
   = iPads and Small Monitors  =
   =============================
   Hide the left nav bar for screens that aren't large enough */
@media only screen and (min-width: 641px) and (max-width: 800px) {
  .sm-page-layout-region-left { display: none; } 
  .sm-page-layout-region .sm-page-layout-region-center { margin-left: 0px !important; }
} 

/*  ================
      = SmartPhones        =
      ================
     For screens large enough, add the word "Download" after the download button */
@media only screen and (min-width: 1200px) {
  /* Add the word "Download" after the download button */
  .sm-button.sm-button-image-download:after {
    content: " Download" !important;
    font-size: 95%;
  }