Sela theme changing google calendar settings- mobile view messed up

  • Unknown's avatar

    I am using Sela Theme.
    The upcoming events page(https://lindgatepool.wordpress.com/upcoming-events/) imports a google calendar, which shows up fine on the desktop version but overflows the body container in the mobile view.

    Worked with WordPress support for 40 minutes to no avail. I am exporting the iframe from google calendar with smaller height/width but Sela changes it to shortcode and resets/overrides the manual size change.

    I added an iframe adjustment to css but that isn’t working, I think because the theme converts it to shortcode. I also added this from a suggestion I found in another forum, but it doesn’t work either:
    #wp-calendar {
    width: 100%;
    }

    When I look at it in the customizer view for mobile it looks fine, but on an actual phone (iPhone 6+) it overflows the body section. I am using the full-width page template but have tried the default page template and that doesn’t make a difference.

    Does anyone have suggestions? I am hoping there is a css fix- WP support has made all the suggestions they can think of. :(

    TIA for any help!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    @yesonpropa, I’m going to have to ping one of our developers on this as looking at the CSS and the HTML in the page sourcecode for the calendar, I can’t see why this is happening. I’ll report back as soon as I hear something from them.

  • Unknown's avatar
  • Unknown's avatar

    @yesonpropa, the developers are having some issues figuring out what is happening here and it make be a few days before they can get this figured out. Since the code for the calendar comes in from Google, sometimes it is a bit of a puzzle to figure out.

  • Unknown's avatar

    @thesacredpath, I appreciate any help they can provide. Thank you!

  • Unknown's avatar

    Any word on this? I have tried absolutely everything I can come up with, including regenerating the code from Google (changing height, width, etc) but Sela keeps resetting it back to the non-mobile compatible absolute width. :(

  • Unknown's avatar

    Sorry for the delay. We’ve reproduced this in a number of themes, so it isn’t a theme issue as far as we can tell. It is likely something in the Google code. Since the code comes in from Google, it isn’t something we can change, but we do have a workaround to offer if you want to give it a try.

    Open that page in the editor, switch to the Text tab and then right before the
    /]
    at the end, add this
    &showTabs=0
    so the end of it would look like this
    ...Chicago" height="600" &showTabs=0 /]
    What that is going to do is take off the Week, Month and Agenda tabs at top right, which seems to be what is causing the issue.

  • The topic ‘Sela theme changing google calendar settings- mobile view messed up’ is closed to new replies.