Forums - View Thread - Settings -- defaults -- Block Styles // mobile displays

Welcome Guest | Login

Index | Recent Threads | Register |

Forums » List all forums » Forum: General Discussion » Thread: Settings -- defaults -- Block Styles // mobile displays

Quick Go »

Thread Status: Normal
Total posts in this thread: 8

[Change thread status] [Delete this Thread] [Move this Thread]
[Add To My Favorites] [Watch this Thread] [Post new Thread]

Author

This topic has been viewed 3845 times and has 7 replies

TriangleSquares
Newbie

Joined: Jun 25, 2011
Posts: 31
Status: Offline

Settings -- defaults -- Block Styles // mobile displays	Reply to this Post Reply with Quote
	[Delete this Thread]

Hello:

I've been trying to get my calendar to display well on phones, tablets and PCs. I've read the pages on CSS and "Making your calendar responsive." I've also tried various settings.

Question 1:
I'm confused about the defaults in the Settings area for PC/Tablet and Mobile.

There is a choice for Default (Block style) and Block Style #2.
Nowhere in the documentation can I find anything that explains what these terms mean. Is Block Style = M0, and Block Style #2 = M4?

Question 2: Trying to obtain readable display in mobile:

I've tried pasting this code in the calendar footer: <style>.view_style_M1 * {font-size:32px;}</style>

It's supposed to make the display large when viewed on a phone. But I find it makes all views large.

I want a block display in all formats -- PC, phone, tablet - not a list display. Can you provide assistance?
Thanks!

Susan C
Triangle Squares

[Feb 17, 2016, 5:30:16 AM] [78.129.156.158]

[Link]

support
localendar Expert

Joined: Aug 9, 2022
Posts: 6395
Status: Offline

Re: Settings -- defaults -- Block Styles // mobile displays	Reply to this Post Reply with Quote
	[Delete this Post]

Well, this is going to be problem straight off:
"I want a block display in all formats -- PC, phone, tablet - not a list display"

You can't but 10lbs of bologna in a 5lb bag. You can force a block-display on a mobile device, but that's a small screen. Readability will be a challenge.

The calendar formats/styles are explained on this page:
http://localendar.com/docs/display/lc/Your+Calendar's+URL+and+Parameters

Regarding your use of custom CSS, I don't think you followed the example exactly.
The example instructs to make the default for Desktop viewed Block Style, and the default for Mobile viewers to be List Style. Thus, the CSS provided will only affect the view for List Style users, and only Mobile users will see that view.

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.

If you want everyone to see a Block style view, then the answer is simple: Select the Block Style view for Desktop and Mobile devices.
----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news

[Feb 21, 2016, 7:24:37 PM] [24.190.224.252]

[Link]

TriangleSquares
Newbie

Joined: Jun 25, 2011
Posts: 31
Status: Offline

Re: Settings -- defaults -- Block Styles // mobile displays	Reply to this Post Reply with Quote
	[Delete this Post]

Hi, Mark:

Thanks for the response.

I don't see any info about the first question I asked.
What's the difference, if any, between the settings
labelled "Default (block style)" and "Block Style #2"?

There must be something distinguishing them
from each other, since they're separate entries.
But Localendar documentation doesn't mention Block Style #2.

Thanks.

SC

[Feb 23, 2016, 12:32:14 PM] [207.188.68.207]

[Link]

OPwebmaster
localendar Expert

Joined: Jan 24, 2015
Posts: 301
Status: Offline

Re: Settings -- defaults -- Block Styles // mobile displays	Reply to this Post Reply with Quote
	[Delete this Post]

TriangleSquares:

Hi, Mark:

Thanks for the response.

I don't see any info about the first question I asked.
What's the difference, if any, between the settings
labelled "Default (block style)" and "Block Style #2"?

I think you are supposed to assume that the Default is =M0, and Block Style #2 =M4.

If you go here:
http://localendar.com/docs/display/lc/Your+Calendar%27s+URL+and+Parameters
you will see that the only difference is that adjacent events are combined into a single block. There is a diagram showing this.

Harry

[Feb 24, 2016, 5:42:31 AM] [72.241.195.138]

[Link]

OPwebmaster
localendar Expert

Joined: Jan 24, 2015
Posts: 301
Status: Offline

Re: Settings -- defaults -- Block Styles // mobile displays	Reply to this Post Reply with Quote
	[Delete this Post]

Marc:

Regarding your use of custom CSS, I don't think you followed the example exactly.

On this page:
http://localendar.com/docs/display/lc/Making+your+calendar+responsive

I cut and pasted the exact lines of custom CSS hooks from 'Different Calendar Views...' and from 'Customizing the Event...'.

The header text, and the test for each event look fine on my Android phone. But the horizontal lines that show the date of the week are so small they cannot be read. By the time the screen is zoomed so they are readable, the event text for even one simple event will not fit on the screen.

Is there a way to increase the size of the date of the week line, so it's text size is more in keeping with the 32px of the header?

Harry

[Feb 25, 2016, 8:54:52 PM] [72.241.195.138]

[Link]

support
localendar Expert

Joined: Aug 9, 2022
Posts: 6395
Status: Offline

Re: Settings -- defaults -- Block Styles // mobile displays	Reply to this Post Reply with Quote
	[Delete this Post]

The weekline text should now respect the CSS you are using to increase the rest of the font size on the calendar.
----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news

[Feb 27, 2016, 8:11:29 PM] [24.190.224.252]

[Link]

OPwebmaster
localendar Expert

Joined: Jan 24, 2015
Posts: 301
Status: Offline

Re: Settings -- defaults -- Block Styles // mobile displays	Reply to this Post Reply with Quote
	[Delete this Post]

Marc:

The weekline text should now respect the CSS you are using to increase the rest of the font size on the calendar.

Works great. Thanks.

Is the weekline text size set by this entry:
<style>.lc_mobile_usr * {font-size:60px;}</style>

or this entry:
<style>.view_style_M1 * {font-size:32px;}</style>

Harry

[Feb 29, 2016, 6:47:46 PM] [72.241.195.138]

[Link]

support
localendar Expert

Joined: Aug 9, 2022
Posts: 6395
Status: Offline

Re: Settings -- defaults -- Block Styles // mobile displays	Reply to this Post Reply with Quote
	[Delete this Post]

It depends.. For a week-view, I think it should be

<style>.view_style_W1 * {font-size:32px;}</style>

and not

<style>.view_style_M1 * {font-size:32px;}</style>

It could also be W0, depending on the default Week View you have selected.

As for .lc_mobile_usr, that class is only present if the person viewing the page is on a mobile device. So although you can set that CSS for every page, it won't have any effect unless the visitor is on a mobile.
----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news

[Mar 19, 2016, 2:13:36 PM] [70.215.16.162]

[Link]

[Show Thread Printable Version] [Post new Thread]