Googleの経路表が正しくサイズ変更されない

Question

Google Directionsのウェブサイトに問題があり、小型のモバイル画面に正しく対応していません。ここでは、以下の画像上の問題がある：

Chromeで、それは携帯電話の多くは小さい幅で画面を持っているので、その情報の一部ではない、問題となっている395ピクセル幅の下に縮小されていません可視。 Firefoxでは307px幅以下にはならないが、これは大きな問題ではないが、これで少し上に行くことができれば良いだろう。 Chromeでinspectを実行すると、問題の発生場所がわかります。これは、「adp-directions」クラスのhtmlテーブル要素にあります。画像は下にあります。 このクラスの幅を100％に変更しようとしましたが、固定幅は395px未満でしたが、395px以下にはなりませんでした。私は見たことのない他のスタイルを上書きするためにCSSを重要視していましたが、まだ何もありません...もし私が何とか私を助けてくれたら、私はここに完全に詰まっていて、 link

Answer 1

は、おそらくあなたの質問を解決する小さなビュー

@media (max-width:420px){table.adp-directions { font-size: 12px !important;}} のフォントサイズのメディアクエリを置くようにしてください：ここでは、サイトへのリンクです。しかし、あなたがフォントサイズを減らすのが好きでないなら、コメントをしてください。私にとって

Answer 2

が最も広い列にword-breakを追加する働いた、長い説明を打破するためには、これは列がその幅を小さくすることができます：

@media (max-width: 420px) { 
    table.adp-directions tr td:nth-child(3) { 
     word-break: break-all; 
    } 
} 

完璧に動作