SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google Calendar - Width problem on iPhone, text not wrapping?

    Hi all

    I'm setting the Google calendar <iframe> to 90% works good on iphone, until an event title exceeds the calendar width which forces the calendar to expand past the 90% mark, breaking design and causing much difficulty for vertical scrolling.

    Does anybody know how to stop the calendar expanding and wrap the text or at least hide it?
    The main details for each entry wrap ok, its just the title causing the issue.

    HTML Code:
    <div class="map_dim">
    <iframe src="https://www.google.com/calendar/embed..."></iframe>
    </div>
    Code CSS:
    div.map_dim iframe {
              width: 90%;
              height: 400px;
              overflow: auto
          }

    Sorry no link at present still working locally.
    Any assistance much appreciated, tried everything.

    Barry
    The more you learn.... the more you learn there is more to learn.

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've managed to get the calendar to stick by applying a fixed pixel width:

    Code CSS:
    div.map_dim iframe {
              width: 280px;
              height: 400px;
              overflow: auto
          }

    Only problem now, I'll need to apply separate widths for portrait (320) and landscape (480) and opera mini (240).

    I currently have,
    HTML Code:
    <link rel="stylesheet" media="screen and (min-width : 240px) and (max-width: 480px)" href="css/smartphone.css">
    Which, with the above in my first post, the 90% deceleration catered for all the screen sizes, maybe this is a % bug ????

    Update

    Code CSS:
    div.map_dim iframe {
        height: 400px;
        overflow: auto;
    }
    @media screen and (device-width: 240px) {
        div.map_dim iframe {
            width: 200px;
        }
    }
    @media screen and (device-width: 320px) {
        div.map_dim iframe {
            width: 280px;
        }
    }
    @media screen and (device-width: 480px) {
        div.map_dim iframe {
            width: 420px;
        }
    }

    For some reason, only device-width: 320px works and iframe dimensions do not change when I rotate the iphone to landscape device-width: 480px ??

    Any suggestions or feedback anybody?

    Thanks, Barry
    The more you learn.... the more you learn there is more to learn.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For anybody interested,
    I managed to fix this by replacing device-width to width... not sure if this is correct but seems to work on the iPhone 4s.

    Code CSS:
    div.map_dim iframe {
        height: 400px;
        overflow: auto;
    }
    @media screen and (width: 240px) {
        div.map_dim iframe {
            width: 200px;
        }
    }
    @media screen and (width: 320px) {
        div.map_dim iframe {
            width: 280px;
        }
    }
    @media screen and (width: 480px) {
        div.map_dim iframe {
            width: 420px;
        }
    }

    Any information to share, let us know

    Barry
    The more you learn.... the more you learn there is more to learn.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •