バリアント選択ラッパー幅（SqSp）

Question

私の個々の製品ページには、製品のバリアントを表示するドロップダウン選択ボックスがあります。バリアントの中には説明文が長いものがあるため、このボックスは長くなります。 デスクトップサイトでは問題ありませんが、モバイルでは選択バーがページの端を超えています。これは私がページの上部にあるモバイルメニューを妨害しているようです。

私が知る限り、私は 'variant-select-wrapper'をターゲットにする必要がありますが、このボックスを短くする方法を見つけることができないように思われます。

このボックスの幅を効果的に縮小または修正する方法を知っている人はいますか、間違ったものを対象にしていますか？ （あなたがデベロッパーを使用している場合や、あなたのCSSファイルに。モード） おかげ

Answer 1

次のCSSは、あなたのために働くべきは、SquarespaceでCSSエディタに追加しました。

.variant-option select { 
    max-width: 100%; 
} 

これにより、選択ボックスの幅自体が親の幅を超えないように制限されます。これは、選択ボックス内のオプションの幅には影響しません。選択肢の幅は、Windowsデバイス上で親（およびその場合はブラウザウィンドウ）の外側に拡大し続けます。ただし、AndroidとiOSでは、オプションがモーダルのようなボックスに表示され、テキストのオプションがラップされます。これは両方のケースで受け入れられるユーザーエクスペリエンスです。

Windowsデバイスにオプションをラップするには、Javascriptが必要です（Ref. 1、Ref. 2）。これが、この単純なCSSアプローチが妥当な妥協策だと考える理由です。