In today's world people aren't just accessing the web from a desktop browser. Some will use tablets, others phones, and probably other devices with different screen sizes (cars? watches? glasses?)
Creating a "responsive" website means the display of your content is readable on as many devices as possible, without requiring any specific action on the part of the person viewing the content.
There are many different frameworks and techniques for building a responsive website. Some website creation tools even handle responsive design automatically, so you don't even need to think about it!
But what happens when you publish your calendar? Is a localendar calendar responsive?
Calendar Size
Your calendar will automatically size itself to fill whatever container surrounds it. If you are linking to the full-screen view of your calendar, then the calendar will fill the entire screen, whatever size it is. If you are using an interactive embedded calendar, and place the calendar HTML inside a fixed or flexibly-sized <div>, then the calendar will constrain itself to that <div>'s size.
Font Size
By default, the calendar's font size will not change automatically. This may present a readability challenge on mobile devices, where a larger font may be preferred on a smaller-sized screen. There is a solution in the section below.
Different Calendar Views for Different Devices
Under Options->General, you can select a default view for Desktop/Tablet devices and a default view for Mobile devices. Combined with localendar's Custom CSS Hooks, this feature can make your calendar responsive for mobile devices.
Here is an example:
- Open the Options->General page
- Select "Default" for the Desktop/Tablet month display style
- Select "List Style" for the Mobile Devices month display
In the Calendar Footer field, paste this HTML:
<style>.view_style_M1 * {font-size:32px;}</style>
The CSS you pasted in the last step essentially says "When the Month-list style (M1) is being shown, make the font size really big".
Now, when a user views your calendar from a Desktop/Tablet browser, they will see the standard block-style view. But from a mobile browser, they will see the list-style view, and with a bigger font.
Customizing the Event Detail pop-up for mobile devices
The CSS class .lc_mobile_usr is automatically added to the Event Detail <body> tag when an event is being viewed from a mobile device.
Here are sample instructions if you would like to increase the font size (or change other attributes) for mobile users viewing an event:
- Open the Options->Events page
In the "Common Event Information" field, paste this HTML:
<style>.lc_mobile_usr * {font-size:60px;}</style>