Как я могу предотвратить перекрытие столбцов сетки и использовать горизонтальную прокрутку для мобильных устройств? ⇐ CSS

[Anonymous]

Я создал небольшое приложение для прогнозирования на неделю для упражнений и использую TailwindCSS. На экранах среднего размера и больше макет выглядит примерно так, как мне хотелось бы (все еще настраиваю). Есть два столбца: данные о погоде в дневное время слева, данные о погоде в ночное время справа. Каждая строка соответствует одному дню. Вертикальная прокрутка подойдет для настольных компьютеров.
На экранах мобильных устройств я решил, что мне нужно иметь две строки: верхнюю — для дневных данных, а нижнюю — для ночных данных. Я думаю, было бы хорошо, если бы вы могли горизонтально прокручивать и привязывать каждый день к центру и переполнять экран вправо или влево. Мой мысленный образ подобен окну, чуть меньше ширины экрана, и каждый день погоды появляется слева или справа.
Проблема, с которой я столкнулся, заключается в чем-то в моем CSS приводит к тому, что элементы div (дни) перекрывают друг друга по горизонтали на мобильных устройствах.
Вот соответствующий код (React и TailwindCSS):

Код: Выделить всё

{forecast.map(period => (


{period.name}




[list]
[*]Temp: {period.temperature}°{period.temperatureUnit}
[*]Dewpoint: {period.dewpoint.value?.toFixed(2)}°{period.dewpoint.unitCode.replace('wmoUnit:deg', '')}
[*]Humidity: {period.relativeHumidity.value}%
[*]Wind: {period.windSpeed} {period.windDirection}
[/list]



{period.detailedForecast}


))}

Текущая версия для ПК
Текущая версия для мобильных устройств>

Подробнее здесь: https://stackoverflow.com/questions/785 ... rolling-fo