PCやモバイルで要素が表示されない原因と対処法

StudioでWebサイトを作成する際、PCでは表示されていた要素が、モバイルでは表示されなくなることがあります。多くの場合、意図せず要素の表示設定が変更されているのが原因です。

以下の手順で、要素の表示設定を確認・変更することで、この問題を解決できます。

エディタ上部のブレイクポイントで、要素が表示される画面幅（PCやモバイルなど）を選択します。

該当の要素をクリックします。その状態で、画面左上の目のマークにカーソルを当てます。表示したい画面幅（PCやモバイルなど）のボックスにチェックが入っているか確認します。なければチェックを入れます。

エディタ上部のブレイクポイントで、要素が表示されない画面幅（PCやモバイルなど）を選択します。

画面左側のレイヤーパネルを開きます。レイヤー名の右横に非表示アイコンが表示されているレイヤーを選択します。

選択した状態で、画面左上の目のマークにカーソルを当て表示設定を変更します。

表示設定が原因でない場合、アニメーションの設定が原因である可能性があります。以下記事の参考に、設定をご確認ください。

条件付きスタイル「出現時」で設定したアニメーションが表示されない場合の対処法