Fix variant select ширина обертки (SqSp)

Question

На моих страницах отдельных продуктов есть выпадающие квадраты выбора, которые отображают варианты для моих продуктов. Поскольку у некоторых вариантов есть более длинные описания, это поле становится длиннее. Это нормально на рабочем столе, но на мобильном телефоне панель выбора проходит за краем страницы. Кажется, это мешает мобильному меню, которое у меня есть в верхней части страницы.

Насколько я могу судить, я должен ориентироваться на «вариант-выбор-обертка», но я много огляделся, похоже, не нашел способ сократить этот квадрат, чтобы он соответствовал мобильному дисплею.

Кто-нибудь знает, как эффективно укоротить или исправить ширину этого окна, или я настроен неправильно? Благодаря

Answer 1

Следующий CSS должен работать для вас, добавили в редактор CSS в Squarespace (или ваши CSS файлы, если вы используете Dev. Режим).

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

Это позволит ограничить ширину окна выбора так, чтобы она не превышала ширину его родителя. Это не влияет на ширину опций в поле выбора, которое будет продолжать распространяться за пределами родительского (и в этом случае браузера) на устройствах Windows. Тем не менее, на Android и iOS, параметры появятся в модальном окне с параметрами завернутого текста. Это приемлемый пользовательский опыт в обоих случаях, я думаю.

Чтобы обернуть параметры на устройствах Windows, необходим Javascript (Ref. 1, Ref. 2), поэтому я считаю, что этот простой подход CSS является разумным компромиссом.