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%; }
- No Comments