What is a Css Mobile Detection Overlay?Responsive css code is used on some template models, and in our addon, to allow the webpages to display an overlay link box selection. The code detects the browser width using css media queries. If the width of the browser is less than the "threshold" (or breakpoint) you set (320, 480 or 640 pixels), the hidden div pops up in the center of the page. If the width is a standard PC or Mac browser, the div will be hidden unless the browser width is below the mobile device set threshold. The overlay box links to an integrated mobile sub-site.
Web Templates That Include a Detection OverlayThe following web templates also include a mobile version sub-site
- Our Earth and Bizzy-DM drop menu designs
- Budget business web templates
- Photography web templates with color themes
- Business photography drop menus
- Drop menu with video
- Color theme drop menu with video
- Davinci & Monet
- Available as an add-on for any website
- Compliant in all css3 web browsers and smartphones.
- Editable width threshold (768, 640, 480, 320, etc). Set the box to popup at the desired width in the global css file.
- Editable link text, replaceable icon images.
- Editable colors using standard css code.
- Works on any website.
- Fully SEO compliant (See section below.)
- Can be added to some or all webpages on the site.
- Available in select Allwebco templates or as a website add-on.
Viewing the Overlay in ActionTo view a working overlay and see the dynamic response, go to our business drop menu templates, click any thumbnail to view a sample website. With the site open on the homepage make your browser width narrow and the overlay will popup on the page. Make your browser width wider and the overlay disappears using css code. A CSS3 compliant browser is required (IE9+, Google Chrome, Safari, Firefox, Opera).
Custom Smartphone & Tablet SettingYou can set the overlay "threshold" from 320 to 480 for mobile only, 768 for mobile and some tablets, or we use a default of 652 in the templates so it will not display on tablets but will display on all small screens. Optionally you can set the threshold or "breakpoint" width to any number you prefer.
The css mobile overlay is available as an add-on script for any type of website. See Css mobile detection overlay
Free Auto Redirection Available
Templates and addons that include the mobile overlay use passive redirection. Users select the mobile version by clicking the overlay box. We also have available, free by request, an automatic smartphone jQuery redirection script. contact us to request this download. For more details see Automatic Mobile Redirection in support.
About Our Designs
Allwebco Design offers a selection of "complete" HTML website template designs built to allow for the highest compatibility on both PC and Mac desktop as well as laptop computers, tablet, smartphones and other mobile devices (iPad, iPhone, Android, etc). Our website designs are built with multiple pre-formatted web pages, drop menus, site search, contact / quote forms, image galleries, video pages, PDF downloads page and more all integrated right into the designs. No other web template company offers these types of complete downloadable HTML / CSS websites at our affordable one time prices.
Only Allwebco Website Templates include an array of features and scripts built right into the designs: contact / quotes forms, photo galleries, dynamic jQuery animation, site search, mobile sites and more. See site features for more details.