【chartkick】cssが勝手に生成されてデザインが崩れてしまう…

Question

概要

現在、円グラフ「chartkick」を導入しています。その影響により、cssのデザインが勝手に生成されているようで、スマホサイズのデザインが崩れてしまいます。

cssのデザインだと思ったのですが、自分でcssは書いていません。

概要

横幅768pxの場合は問題なく、表示されています。

横幅425pxの辺りから、縮まるごとにデザインが崩れていきます。
検証でid="chart-1"がwidth:400px;になっているのが問題です。

自分で行ったこと

まずは検証を行い、上記のid="chart-1"が生成されていることを確認しました。
そこで以下のようにして修正を行うと、スマホサイズのデザインも解決することができました。

@media screen and (max-width: 450px) {
  .highcharts-root{
    width: 80vw;
    margin: auto;
   } 
   #chart-1{
     width: 80vw!important;
   }
}

ここで一度安心したのですが、一覧ページでは複数のグラフが存在するため、id="chart-２"以降が存在しています。

!importantで、強制している時点で正しい対応の仕方とは言えませんね…
何か良い方法があれば、教えてくださると嬉しいです！

Answer 1

朝起きてrails sをしたら、治っていました。よくわからないですが、よかったです。