Message-ID: <1572125536.729.1711713174366.JavaMail.ELSIE-CT-VM$@elsie-ct-vm> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_728_1113861898.1711713174366" ------=_Part_728_1113861898.1711713174366 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
In today's world people aren't just accessing the web from a des=
ktop browser. Some will use tablets, others phones, and probably other devi=
ces with different screen sizes (cars? watches? glasses?)
Creating a
There are many different frameworks and techniques for building a respon= sive website. Some website creation tools even handle responsive design aut= omatically, so you don't even need to think about it!
But what happens when you publish your calendar? Is a localendar calenda= r responsive?
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 ins= ide a fixed or flexibly-sized <div>, then the calendar will constrain= itself to that <div>'s size.
By default, the calendar's font size will not change automatically. This may present a readabili= ty challenge on mobile devices, where a larger font may be preferred on a s= maller-sized screen. There is a solution in the section below.
Under Options->General, you can select a default view for Desktop/Tab=
let devices and a default view for Mobile devices. Combined with localendar=
's Custom CSS Hooks, t=
his feature can make your calendar responsive for mobile devices.
Here =
is an example:
In the Calendar Footer field, paste this HTML:
<sty= le>.view_style_M1 * {font-size:32px;}</style>=20
The CSS you pasted in the last step essentially says "When the Month-lis=
t 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 th=
e standard block-style view. But from a mobile browser, they will see the l=
ist-style view, and with a bigger font.
The CSS class .lc_mobile_usr is automatically added to =
the Event Detail <body> tag when an event is being viewed from a mobi=
le device.
Here are sample instructions if you would like to increase t=
he font size (or change other attributes) for mobile users viewing an event=
:
In the "Common Event Information" field, paste this HTML:
<sty= le>.lc_mobile_usr * {font-size:60px;}</style>=20