Страница выглядит неккорректно на смартфоне в то время в Devtools все отображается правильно?

Question

[Simplelamer8]

Вот как выглядит страница через Devtools https://i.stack.imgur.com/HyhQk.png https://i.stack.imgur.com/HyhQk.png
Запуск через смартфон: https://i.stack.imgur.com/OqTjT.jpg https://i.stack.imgur.com/OqTjT.jpg
У меня уже есть мета тег.

@media screen and (min-width: 320px) and (max-width: 425px)
{
main
{
min-width: 100%;
overflow: scroll;
border-radius: 0;
padding: 5rem;
}
.weatherCards
{
min-width: 100%;
column-gap: 5rem;
padding-left: 3rem;
}
.change
{
display: flex;
flex-direction: row;
right: 15vw;
top: 0rem;
padding: 0.5rem;
height: 3rem;
width: 11rem;
}
}

Здесь main это основная инфа как место, температура итд. WeatherCards класс это прогноз погоды. Прошу "Шарящих" помочь я уже 2 дня вожусь с багом Т_Т

codepen link: https://codepen.io/simplelamer8/pen/VwVzPBR

Comments

[Антон Антон]

ну очевидно, что не влезает название города, его надо сделать отдельно во всю ширину (кажется, сейчас он в левой части флекс контейнера) и в дальнейшем разрешить переноситься с разрывом слова или отдельным скроллом.
https://developer.mozilla.org/en-US/docs/Web/CSS/w...
https://developer.mozilla.org/ru/docs/Web/CSS/word...

Рекомендую тестировать на населенном пункте "поселок Центральной усадьбы совхоза имени 40-летия Великого Октября" или хотя бы "Александровск-Сахалинский"

[Simplelamer8]

Антон Антон, Спасибо за ответ, но дело в том что когда там стоит один и тот-же город, на мобилке название смещена и не полностью видна. То есть, вопрос в том что почему при тех же параметрах в devtools как в смартфоне, имеются отличия от настоящего девайса?

[Антон Антон]

Simplelamer8, ну тут слишком мало информации. лучше всего выложить на codepen воспроизведение

[Simplelamer8]

Антон Антон, https://codepen.io/simplelamer8/pen/VwVzPBR