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

Mobile
1

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.

<div class="map_dim">
<iframe src="https://www.google.com/calendar/embed..."></iframe>
</div>

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

2

I’ve managed to get the calendar to stick by applying a fixed pixel width:

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,

<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

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

3

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.

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 :cool:

Barry