Нет отображения на мобильных устройствах

@cahe4a · Регистрация: 19.08.2017

Студворк — интернет-сервис помощи студентам

Коллеги, Здравствуйте!

Есть сайт http://accounts-store.ru/ На ПК разрешении отображается нормально, кнопка купить справа отображается корректно:

Нет отображения на мобильных устройствах

На мобильных устройствах кнопка купить справа исчезает полностью без возможности прокрутки вправо вот так:

Подскажите пожалуйста, как сделать так, чтобы при уменьшении разрешения кнопка купить переносилась вниз? Грубо говоря строка которую видно на первой картинке, на мобилках была отображена столбиком?

Код строки ( первая картинка ) :

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="row1">
<div class="col-md-1 hidden-sm hidden-xs">
<img src="http://accounts-store.ru/images/vk.png" alt="" class="img-responsive" />
</div>
<div class="col-lg-5 col-md-5 col-sm-7 col-xs-12 job-title "> <abbr  rel="tooltip" title="Для регистрации пустых аккаунтов вконтакте мы используем выделенные телефонные номера. Сочетание ручной регистрации и индивидуальных прокси серверов, дает надежный аккаунт, который не попадает под лишнее внимание администрации.">
<h5><i class="flag-RU"></i>&nbsp;СВЕЖЕРЕГ ПУСТЫЕ ЖЕНСКИЕ</h5>
<p style="margin-top: 4px;" ><strong>SMS +</strong> ВЫДЕРЖКА 12 МЕСЯЦЕВ + АНТИБАН</p> </abbr>
</div>
<div style="margin-top: 13px;" class="col-lg-4 col-md-4 col-sm-5 col-xs-12 job-location">
<p><strong>Загружено: <script type="text/javascript" src="//accounts.e-autopay.com/external/widgets/pincodes/205848"></script></strong></p>
<p class="hidden-xs">Формат: ЛОГИН : ПАРОЛЬ</p>
</div>
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs job-type text-center">
<p style="margin-top: -5px;" class="job-salary"><strong>19 Р.</strong></p>
<p  href="#text-popup" style="cursor: pointer;" class="badge full-time popup-content">Купить</p>
</div>
</div>

С уважением, Александр!

@Freeze_Breeze · 18.10.2017, 14:22

Вы добавляли?

CSS
1
<meta name="viewport" content="width=device-width, initial-scale=1">

Добавлено через 4 минуты
Если у Вас нету возможности прокрутки поищите в коде overflow: hidden;, а дальше будем смотреть.

@cahe4a · 18.10.2017, 14:33 **[ТС]**

Да, экран адаптируется под разрешение, но отображается только эта часть:

HTML5
1
2
3
4
<div class="col-lg-5 col-md-5 col-sm-7 col-xs-12 job-title "> <abbr  rel="tooltip" title="Для регистрации пустых аккаунтов вконтакте мы используем выделенные телефонные номера. Сочетание ручной регистрации и индивидуальных прокси серверов, дает надежный аккаунт, который не попадает под лишнее внимание администрации.">
<h5><i class="flag-RU"></i>&nbsp;СВЕЖЕРЕГ ПУСТЫЕ ЖЕНСКИЕ</h5>
<p style="margin-top: 4px;" ><strong>SMS +</strong> ВЫДЕРЖКА 12 МЕСЯЦЕВ + АНТИБАН</p> </abbr>
</div>

Остальные DIV в другом измерении ))

Добавлено через 1 минуту
В CSS под различными элементами много раз попадается данный код

CSS
1
overflow: hidden;

@Freeze_Breeze · 18.10.2017, 14:42

У Вас слишком все запутанно в коде, если смотреть через браузер, можете архив со своим сайтом сбросить, так будет проще найти ошибку.

@cahe4a · 18.10.2017, 14:44 **[ТС]**

ACCOUNTS RU.rar

@AlexZaw · 18.10.2017, 14:59

Уберите у .row1 ограничение по ширине. Или добавьте в медиазапросы для него правила для изменения ширины.

@Freeze_Breeze · 18.10.2017, 14:59

У меня вопрос к тебе, почему у тебя 9700 строк CSS кода?

@cahe4a · 18.10.2017, 15:00 **[ТС]**

Потому что я идиот! хахахахах

@Freeze_Breeze · 18.10.2017, 15:05

Давай так. Ты добавишь к себе в код вот эту строку

CSS
1
<meta name="viewport" content="width=device-width, initial-scale=1">

Уберешь все лишнее с CSS кода, приведешь свои папки в порядок, подключишь нормально bootstrap, font awesome, файлик с медиазапросами, шрифтами и т.д. Вообщем приведешь в порядок свое содержимое, а потом будем смотреть. И самое главное подавляй ; в конце CSS кода. Это мазахизм разбираться в таком безобразном написании кода.

@cahe4a · 18.10.2017, 15:09 **[ТС]**

Сделаем. Спасибо большое за подсказку. Без вашей взбучки я бы оставил всё как есть )

@boilzzz · 18.10.2017, 15:17

Freeze_Breeze, Что ты вы чуш порите немножко)

cahe4a, У вас для блока с кнопкой задан класс .hidden-sm, он скрывает на мобильных устройствах кнопку.

@Freeze_Breeze · 18.10.2017, 15:24

boilzzz, Ну да, а типо 9000 css кода это нормально...?

@AlexZaw · 18.10.2017, 15:32

Проблема не в том что кнопки скрываются, они у всех элементов убираются, а в том что при уменьшении экрана два верхних пункта выходят за границы, так как у них задан width:1138px. И где то запрещен скролл, что и приводит к проблеме

Ну и из css надо лишнее повыкидывать, а то такое впечатление что бутстрап был скачан со всеми опциями. Хотя при такой верстке он вообще не нужен. и код бы сразу стал не 9к строк а 500

@cahe4a · 18.10.2017, 16:06 **[ТС]**

Убрал класс .hidden-sm и возник такой ад на мобильном

@boilzzz · 18.10.2017, 17:53

cahe4a, ну это не ад)

Добавлено через 51 секунду

Сообщение от Freeze_Breeze

Ну да, а типо 9000 css кода это нормально...?

Зависит от проекта)

@AlexZaw · 18.10.2017, 18:22

Сообщение от cahe4a

Убрал класс .hidden-sm и возник такой ад на мобильном

почему ад? нормально выглядит, осталось подправить первые два ряда

@cahe4a · 18.10.2017, 22:30 **[ТС]**

Решилась проблема частично методом добавления

HTML5
1
<meta name="viewport" content="width=device-width, initial-scale=1">

и удалением ширины rov1 в css

Однако все равно на мобильной версии показывает только первую колонку описания. Кнопка купить и количество не отображает

@AlexZaw · 18.10.2017, 22:55

Теперь уберите класс hidden-xs

это явно не вы верстали

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

Нет отображения на мобильных устройствах

Решение

Решение

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	18.10.2017, 14:42
	У Вас слишком все запутанно в коде, если смотреть через браузер, можете архив со своим сайтом сбросить, так будет проще найти ошибку. 1

@cahe4a 2 / 2 / 0 Регистрация: 19.08.2017 Сообщений: 50
	18.10.2017, 14:44 [ТС]
	ACCOUNTS RU.rar 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	18.10.2017, 14:59
	Уберите у .row1 ограничение по ширине. Или добавьте в медиазапросы для него правила для изменения ширины. 1

@cahe4a 2 / 2 / 0 Регистрация: 19.08.2017 Сообщений: 50
	18.10.2017, 15:00 [ТС]
	Потому что я идиот! хахахахах 2

@cahe4a 2 / 2 / 0 Регистрация: 19.08.2017 Сообщений: 50
	18.10.2017, 15:09 [ТС]
	Сделаем. Спасибо большое за подсказку. Без вашей взбучки я бы оставил всё как есть ) 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	18.10.2017, 15:17
	Freeze_Breeze, Что ты вы чуш порите немножко) cahe4a, У вас для блока с кнопкой задан класс .hidden-sm, он скрывает на мобильных устройствах кнопку. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	18.10.2017, 15:24
	boilzzz, Ну да, а типо 9000 css кода это нормально...? 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	18.10.2017, 15:32
	Сообщение было отмечено cahe4a как решение Решение Проблема не в том что кнопки скрываются, они у всех элементов убираются, а в том что при уменьшении экрана два верхних пункта выходят за границы, так как у них задан width:1138px. И где то запрещен скролл, что и приводит к проблеме Ну и из css надо лишнее повыкидывать, а то такое впечатление что бутстрап был скачан со всеми опциями. Хотя при такой верстке он вообще не нужен. и код бы сразу стал не 9к строк а 500 1

@cahe4a 2 / 2 / 0 Регистрация: 19.08.2017 Сообщений: 50
	18.10.2017, 16:06 [ТС]
	Убрал класс .hidden-sm и возник такой ад на мобильном 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	18.10.2017, 22:55
	Теперь уберите класс hidden-xs это явно не вы верстали 0