Поломка мобильной верстки страницы

wwizard

Местный житель
Регистрация
20 Июл 2009
Сообщения
585
Реакции
21
До моих правок по вставке картинок и прайса - все было хорошо. а теперь поплыла мобильная версия страницы, и прайс через мобилку открывается через одно место: Для просмотра ссылки Войди или Зарегистрируйся - вот сайт. Чтото можно придумать, чтоб поправить ошибки мобильной верстки - и по факту посмотреть юзабилити сайта, так как он создан для рекламы для Я.Директа и Гоогле Адвордса
 
У вас прайс сверстан практические как таблица display: table-cell, сделайте медиа запросы @media и переведите display: block, а дальше все padding-ами и margin-ами
 
если по-быстрому, добавьте в .css
-----------------------------------------------
@media (max-width: 760px)
{
.t510__textwrapper
{
padding-left: 1%;
float: left;
}
}
----------------------------------------------
 
почему бы не использовать бутстрап?
 
если по-быстрому, добавьте в .css
-----------------------------------------------
@media (max-width: 760px)
{
.t510__textwrapper
{
padding-left: 1%;
float: left;
}
}
----------------------------------------------

Ну и по желанию под планшетную вёрстку тоже можно сделать
 
если использовать бутстрап, то нужно обернуть все таблицы в div с классом table-responsive
причем можно указать при каких размерах экрана срабатывать
table-responsive{-sm|-md|-lg|-xl}
и у самой таблицы должен быть обязательно класс table
 
Да лучше сделать нормальную блочную верстку. Желательно использовать Bootstrap4 или Foudation6. Так как гриды сделаны на флексах а не на флоатах. Что гораздо упрощает жизнь.
 
Предлагаю юзать pure css io, хороший фрейм на флексе
 
> так как он создан для рекламы для Я.Директа и Гоогле Адвордса

блоки директа и адвордса потом тоже в css поправить не забудьте)
 
1) хотите совет, не слушайтесь чужих советов. У вас без bootstrap работает? Внесите мелкие правки и все тут. Вам ради нескольких мелочей предлагают ! включить фреймворк на мобильные блин страницы в 400 - 500 кб! Это охренительный прогресс в юзабилити. Увеличить мобильную версию сайта на пол метра. А мы все подождем, пока оно загрузится с мобильного интернета. Ага. 2) max-width: 767 #c_text height: auto. Уберите высоту. Иначе в разделе цены не видно полностью блок.
 
Назад
Сверху