Увеличение ширины в мобильной версии
Все здравствуйте!!!
Друзья, столкнулся с такой проблемой: имеется скрит, который генерирует список спортивных сбытый, рядом с каждым событием есть стрелочка, при нажатии на которую появляются коэффициенты. Ширина блока со скриптом резиновая (100%) и при просмотре с мобильного телефона при нажатии на эту стрелочку и появлении коэффициентов, почему то справа появляется свободная область на экране и весь сайт можно двигать вправо-влево!
<html lang="en">
<head>
<title>проба</title>
<style>
html, body {border:1px solid red;}
</style>
<meta name="viewport" content="width=device-width; initial-scale=1">
</head>
<body>
<div style="border:1px solid #000;width:100%;">
<script type="text/javascript" src="https://widget.enetscores.com/FWEDA4961D068DEAF1"></script>
</div>
</body>
</html>
Код очень простой и там просто нет места для ошибки! Я даже специально все рамочками обвел, что бы видно было какой из блоков увеличивается, но оказывается, что ничего не увеличивается а просто справа появляется свободная область! можно конечно запретить прокрутку, тогда она не появляется, но все же мне кажется это не правильно! Может кто сталкивался с такой проблемой или знает в чем тут может быть дело!! помогите пожалуйста!!! ссылка на саму страничку - http://score365.ru/m/w3.php п.с. при просмотре с ПК блок растягивается на всю ширину и эти коэффициенты показаны рядом, а не в с крытом блоке. А вот с мобилки они прячутся и при развороте появляется выше описанная проблема! Посмотреть с ПК можно используя режим просмотра нажав F12 и затем ctrl+shif+m! |
puzjob,
В Хром/Андроид таблица на всю ширину экрана. В вертикальной ориентации коэффициенты спрятаны/показываются, в горизонтальной видны. Никаких свободных областей по бокам и полосы горизонтальной прокрутки нет. При просмотре F12 и затем ctrl+shif+m на ПК тоже все нормально. |
Dilettante_Pro,
когда коэффициенты показаны - то можно прокрутить вправо (в вертикально ориентации)! Я тоже смотрю через Хром/Андроид! При показе кэфов визуально ничего не меняется, однако если провести пальцем, то она двигается....( |
Цитата:
 |
Действительно, можно сдвинуть влево. Причем элементов, вылезающих за рамочки, не заметно.
Правда, в режиме эмуляции мобильника на ПК красная рамочка не умещается в экран, а на Хром/Андроид визуально все нормально - но сдвинуть можно и там, и там. |
Dilettante_Pro,
вот об этом то и речь!! Вообще не могу понять природу данного явления!!! Может есть какие секреты в мобильной верстке? Типа тегов специальных или что-то такое....?! |
Цитата:
https://es-css.enetscores.com/css/li....584/style.css Строка 18354 |
wff_soccer_event_row_odds wff_show_block{
width: 100% !important;
}
в стайл добавьте куда нибудь |
стайл для таблицы у которого 21 тысяча строк :(
|
j0hnik,
Добавил!! При нажатии теперь вообще все разваливается и указатель переносится на другую строку!!!( посмотрите на странице - http://score365.ru/m/w3.php |
puzjob, а запятую зачем поставили между классами?
Уберите. |
.wff_soccer_event_row_odds.wff_show_block {
width: 100% !important;
}
вот так, а не через запятую |
Спасибо большое!!! Все сработало!!!
А можно еще вопросик вот такой (это не критично, но все же) - при вертикальном расположении экрана эти коэффициенты отображаются прям по центу, под местом, где будет счет, но если перевернуть телефон и видимая область становится шире, то эти коэффициенты смещаются относительно центра! Можно и это как-нибудь подправить? Напишите как, если знаете и Вам не сложно помочь!! Заранее благодарен!!! |
Nexus,
Спасибо большое!!! Все сработало!!! А можно еще вопросик вот такой (это не критично, но все же) - при вертикальном расположении экрана эти коэффициенты отображаются прям по центу, под местом, где будет счет, но если перевернуть телефон и видимая область становится шире, то эти коэффициенты смещаются относительно центра! Можно и это как-нибудь подправить? Напишите как, если знаете и Вам не сложно помочь!! Заранее благодарен!!! |
puzjob, попробуйте так:
@media (max-width:652px){
.wff_soccer_event{
padding-left:10px;
margin-right:-10px;
}
}
|
Nexus,
Большое спасибо!! Нашел другое решение, но несказанно благодарен, всем, кто откликнулся!! От души!!! |
| Часовой пояс GMT +3, время: 02:06. |