iPadを横にした時だけdivが回りこんでくれない

google calender events のプラグインを、 このプラグイン専用のcssで見た目を整えて使っているけど、イベント名をタップすると詳細情報が表示されるように作っている。しかし。


iPadを横にした時だけ、詳細情報がイベント名の右側にぴょいっとはみ出してしまう。
iPad縦、iPhone縦横は、イベント名の真下に表示される（ちなみにjQueryを使ってもう１回タップすると消える仕様）。これが理想。

問題ない時って、タイトルの横幅が枠いっぱいに広がってるんだよね。なぜかiPadヨコの時は、同じcssなのに横幅が枠の半分しか表示されない。

そこで、iPadヨコの時だけ、詳細情報を入れたdivの真上にあるイベント名関連のタグに「横幅は枠いっぱいで！」と指定して、詳細情報のdivが回りこんで次の行に行くことを狙った。だけど、イベント名が枠いっぱいに表示されたとしても、イベント名の右側にぴたっとくっついて離れない。枠はみ出してまでそんな所にいなくてもいいじゃんよぅ。


昨日、枠をはみ出して横並びになっていたテキストは、どこかのpにfloat:leftが入っていたので、noneにしたら希望通り枠におさまった。

それと同じかもしれないと思い、あちこちつついてはいるんだけど…

書きだしてみたらかなり入れ子になっているから、これを１個ずつ把握していけば、どこかで効くのかな…
それにしても、このcssはパソコンでも共有していて、iPadより広い画面だけどイベント名は大枠いっぱいにちゃんと広がっている。

あと１歩のようで、まだまだ。こういうのが一番歯がゆいというか…


…このcssだけのせいじゃないのか…？


======結局こうしました=======

イベント名がiPadヨコいっぱいに広がるような文字量にはならないので、ここだけデザインを変えて、イベント名と詳細がちょうどよく横並びになるようにした。
そうすると、iPadヨコの設定がパソコン版に効くようになってしまったので、このあたりのセッティングはgoogle calendar eventsの専用cssではなく、スマホ＆タブレット用のcssに移動させて、スマホとタブレットのそれぞれの画面サイズの部分にタグを置いて、パソコン、タブレット、スマホ総てに最適化。

解決。


他のところをやろうっと。


そういえば、ほったらかしていた画像スクロールはどうするんだ…。