Google Calendar mobile view

  • Author
    Posts
  • #87155

    seftoncvs
    Member
    Original poster

    Hi guys,

    I use a Google Calendar on my blog, which can be viewed at http://www.seftoncvs.org.uk/events – but unfortunately it doesn’t display the full width of calendar on mobile view.

    The embed code does have “width=”100%” but it’s as if the theme doesn’t recognise it.

    Has anyone else had this problem? And is there a CSS code to assist?

    I browsed the forum for similar topics and searched but couldn’t locate a similar issue – especially regarding the Organization theme.

    Any help would be greatly appreciated!

    Thanks,
    Ste

    The blog I need help with is: seftoncvs.org.uk

    #87404

    otjeremy
    Member

    Hi Ste,

    Can you provide a screenshot from your mobile device? I’m seeing slight cutoff on the right of the menu, but nothing that interferes with its use.

    Thanks!

    #87405

    seftoncvs
    Member
    Original poster

    Hi otjeremy, thanks for the response.

    Here ar some screenshots from my iPhone 5s. Similar situation on iPad view h fortunately too. I hope this illustrates what I mean, with the farright side of the calendar cutting off.

    https://imageshack.us/i/p7CiRVJ0j

    https://imageshack.us/i/hlZvWUctj

    Thanks for looking at this for me,

    Ste

    #87423

    seftoncvs
    Member
    Original poster

    We’re my screenshots helpful in demonstrating the issue? I’m confident it could be a CSS edit, or an embed code edit but I’ve tried a few adjustments to no avail!

    Any help or advice would be greatly appreciated,

    Many thanks,
    Ste

    #87432

    otjeremy
    Member

    Hi Ste,

    Those screenshots were helpful yes :) My apologies for the delay, I’ve been looking into possible solutions. The issue is more Google Calendar than the theme, so short of being able to adjust the calendar with Javascript the only thing I can recommend (that works with CSS) is two calendar embeds.

    You’d have something like (one above the other):

    <div class="google-calendar-large">
    { iframe embed }
    </div>

    and

    <div class="google-calendar-small">
    { iframe embed }
    </div>

    You’d then use media queries to hide the large and small calendars where appropriate, e.g. you might have something like:

    .google-calendar-small {
        display: none;
    }
    
    @media only screen and ( max-width: 727px ) {
    
        .google-calendar-large {
            display: none;
        }
    
        .google-calendar-small {
            display: block;
        }
    
    }
    
    { Any other styling as desired }

    The issue seems to be that the calendar cells will only get so small before the calendar decides it no longer wants to be responsive, so embedding a small calendar to display on smaller displays seems easier (and a lot less tedius) than trying to re-style an iframe.

    Thanks!

The topic ‘Google Calendar mobile view’ is closed to new replies.