Auto size for mobile phones

  • I have the following code which calls up a calendar (TeamUp calendar). It works and looks great on a laptop. However, when viewing on a phone, only the first couple columns of the monthly calendar show. There are no scroll bars available and ‘swiping’ the screen doesn’t show the remainder of the calendar. I’ve tried making the width 100% but that doesn’t work either.

    <iframe width="1000" height="800" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src= "https://teamup.com/ks9c4b968e3f168770/"</iframe>

    Is there something I can add to the above to make that happen? I am really new to WordPress but feel I’m getting around ok.

    Thanks so much
    Phyllis

Viewing 4 replies - 1 through 4 (of 4 total)

  • Can you please add a link to the page which has the calendar embedded in it?

    Thread Starter phylfunk

    (@phylfunk)

    Here’s the link. https://gbc-topeka.org/calendar-events/

    Thanks

    Not sure if this is going to work, but you can try adding this CSS rule to your custom CSS (Appearance → Customize → THeme Options → Advanced → Custom CSS):

    @media only screen and (max-width: 768px) {
   #post-64 iframe {
      max-width: initial;
   }
}

    If that doesn’t work, you can also try modifying the iframe code that you paste into the page by setting the scrolling parameter to no instead of yes.

    Thread Starter phylfunk

    (@phylfunk)

    Thanks so much. I haven’t gotten the custom CSS to work yet but will keep working on it. The “no” scrolling doesn’t seem to make a difference either.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Auto size for mobile phones’ is closed to new replies.