Добавляем плагин fotorama в realia

[nagovizin 12]

Знает кто нить как у фоторамы ограничить превью внизу по ширине, мобильную версию ломает.

[doma 22]

Только что, nagovizin сказал:

Знает кто нить как у фоторамы ограничить превью внизу по ширине, мобильную версию ломает.

покажите скриншот что и как ломает, и на каком устройстве + скриншоты с других телефонов желательно, чтобы понимания было больше

[nagovizin 12]

вот так выглядит страница объявления на телефоне асус zenfon если много фоток.

[Дмитрий Кондин 690]

Вот такой еще есть вариант реализации

http://realtydomod.ru/prodaja/2-komnatnaya/realty35886.html

[nagovizin 12]

 

3 часа назад, rumantic сказал:

Вот такой еще есть вариант реализации

http://realtydomod.ru/prodaja/2-komnatnaya/realty35886.html

Для того вида что нужно сделать?

[Дмитрий Кондин 690]

В 4/21/2017 в 13:48, nagovizin сказал:

 

Для того вида что нужно сделать?

Пишите в личку, договоримся )

[Pavel88 7]

Добрый день.

Проблема с мобильной версией уже кажется не побеждаемой.

Вкратце - фоторама сама решает какой ей размер принимать и ее не интересуют правила респонсива и т.д.

Заходим на страницу объекта и получаем такую картинку:

Чтобы увидеть нормальную карточку объекта, уменьшаем пальцами к нормальному размеру(по решению Фоторамы) и получаем маленький не читабильный текст:

 

 

P.S. Ситуация наблюдается с любого мобильного устройства, с любым размером экрана.

[TopRaN 235]

Пришлите доступы от ФТП в личку, посмотрю завтра, что у вас не так.

[metrpro 42]

Удалось победить?

[abushyk 694]

В 01.11.2017 в 16:07, metrpro сказал:

Удалось победить?

Возможно что да.

В \template\frontend\realia\css\bootstrap.corrections.css добавляем стили

body #wrapper-outer #wrapper {
 display: block;
 height: auto;
}

body #wrapper-outer #wrapper #wrapper-inner {
 display: block;
 height: auto;
}

body #wrapper-outer #wrapper #footer-wrapper {
 display: block;
 height: auto;
}

Они отменят некоторую встроенную в реалию стилизацию и дадут возможность фотораме нормально позиционироваться. Хром, эмуляторы в хроме и фф отрабатывают без поломок. В остальных браузерах я не тестировал.

[doma 22]

удалить 

[abushyk 694]

да

да

да

да

[metrpro 42]

23 часа назад, abushyk сказал:

В \template\frontend\realia\css\bootstrap.corrections.css добавляем стили

Константин, плюсую! Теперь в адаптивной версии выглядит кошерно! Спасибо!

[abushyk 694]

С помощью пользователя doma мы обнаружили, что при новых стилях наличествует схлопывание страницы, у которой очень мало контента (например адрес /account/data под гостем). Для ликвидации этого схлопывания предлагается обернуть новые стили меазапросом

@media (max-width: 767px) {
    body #wrapper-outer #wrapper {
        display: block;
        height: auto;
    }

    body #wrapper-outer #wrapper #wrapper-inner {
        display: block;
        height: auto;
    }

    body #wrapper-outer #wrapper #footer-wrapper {
        display: block;
        height: auto;
    }
}

В итоге на микроэкранах мы получаем адекватную фотораму, а на десктопах, где фоторама у нас не уплывала, получаем нормальные "полупустые" страницы без схлопывания.

[doma 22]

3 часа назад, abushyk сказал:

С помощью пользователя doma мы обнаружили, что при новых стилях наличествует схлопывание страницы, у которой очень мало контента (например адрес /account/data под гостем). Для ликвидации этого схлопывания предлагается обернуть новые стили меазапросом

@media (max-width: 767px) {
    body #wrapper-outer #wrapper {
        display: block;
        height: auto;
    }

    body #wrapper-outer #wrapper #wrapper-inner {
        display: block;
        height: auto;
    }

    body #wrapper-outer #wrapper #footer-wrapper {
        display: block;
        height: auto;
    }
}

В итоге на микроэкранах мы получаем адекватную фотораму, а на десктопах, где фоторама у нас не уплывала, получаем нормальные "полупустые" страницы без схлопывания.

а почему именно 767px ? можно сделать например 1199 px ?- просто хотели бы понимать отчего пляшется эта цифра.
понимаем что можно и ответить :)) делайте сколько хотите    просто 767 это явно как то с бутстрапом связано напрямую или с коррекционным фалом в шабоне реалия

 

и тот медиазапрос что вы предложили сейчас прибавить или те убрать и только новый оставить?

[TopRaN 235]

1 час назад, doma сказал:

а почему именно 767px ? можно сделать например 1199 px ?- просто хотели бы понимать отчего пляшется эта цифра.
понимаем что можно и ответить :)) делайте сколько хотите    просто 767 это явно как то с бутстрапом связано напрямую или с коррекционным фалом в шабоне реалия

 

и тот медиазапрос что вы предложили сейчас прибавить или те убрать и только новый оставить?

Потому что есть правила запросов для медиаустройства. Правила адаптивного дизайна.

[doma 22]

Только что, TopRaN сказал:

Потому что есть правила запросов для медиаустройства. Правила адаптивного дизайна.

это мы понимаем. но ответ ждали типа такого
1) такая ширина потому что это написано в таком то файле и в шаблоне для разметки идет подстраиванеи под такой то дисплей мобильного
мы видели файлы в которых сначала тдет стандартная разметка бутстрапа а потом еще файл в котором он правится под меньший размер 
например span3 в бутстрапе идет ширина 300 px а потом он корректируется до 270px

[TopRaN 235]

1 час назад, doma сказал:

это мы понимаем. но ответ ждали типа такого
1) такая ширина потому что это написано в таком то файле и в шаблоне для разметки идет подстраиванеи под такой то дисплей мобильного
мы видели файлы в которых сначала тдет стандартная разметка бутстрапа а потом еще файл в котором он правится под меньший размер 
например span3 в бутстрапе идет ширина 300 px а потом он корректируется до 270px

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

[doma 22]

Только что, TopRaN сказал:

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

Спасибо  это мы на 95 % знали  но нас смущало другое почему именно 767 а не 480 именно/
Вывод сделали так  типа данный медиазапрос оптимален для 
Phones to tablets
то есть при просмотре с мобильного и небольших таблетников-планшетов
если размер будет больше чем планшет то он уже не будет работать
фактически медиазапрос будет срабатывать по такому условию
 

@media (max-width: 767px)

для всех устройств у кого максимальный размер 767 а это отт 0до 767 будет срабатывать именно вышеприведенный медиазапрос.
Правильно?

[TopRaN 235]

6 минут назад, doma сказал:

@media (max-width: 767px)
для всех устройств у кого максимальный размер 767 а это отт 0до 767 будет срабатывать именно вышеприведенный медиазапрос.
Правильно?

Не правильно. запрос будет работать до 766 и от последуюго медиазапроса (если таковой есть) в случае с бутстрапом - то 480ю

[doma 22]

Только что, TopRaN сказал:

Не правильно. запрос будет работать до 766 и от последуюго медиазапроса (если таковой есть) в случае с бутстрапом - то 480ю

наверное в один пиксель вы не правы :)) потестили сейчас на сайте 
1) если сделать ширину равную 767 то футер прижимается к верху
2) если сделать ширину 768 то футер прижимается уже к низу
так что костя все правильно написал

У нас такой еще вопрос - если вы пишите что данное правило будет работать от 480 до 767 то наверное все же не правильно (при условии что медиазапрос не прописан для дисплеев с меньшим размером а только тот что описан выше)
тут же вроде написано что условие будет срабатывать для всех устройст с МАКСИМАЛЬНОЙ шириной 767 px

[TopRaN 235]

19 минут назад, doma сказал:

наверное в один пиксель вы не правы :)) потестили сейчас на сайте 
1) если сделать ширину равную 767 то футер прижимается к верху
2) если сделать ширину 768 то футер прижимается уже к низу
так что костя все правильно написал

У нас такой еще вопрос - если вы пишите что данное правило будет работать от 480 до 767 то наверное все же не правильно (при условии что медиазапрос не прописан для дисплеев с меньшим размером а только тот что описан выше)
тут же вроде написано что условие будет срабатывать для всех устройст с МАКСИМАЛЬНОЙ шириной 767 px

Самые умные забываю правило золотого пикселя , для разных браузеров.

1. read me

2.read me now

[doma 22]

Только что, TopRaN сказал:

Самые умные забываю правило золотого пикселя , для разных браузеров.

1. read me

2.read me now

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

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

у нас предложение. чтобы даже например при просмотре с мобильного футер совсем не прилипал к верху может все же как то сделать минимальныую высоту ? а то посмотрите как с мобильного смотрится

[TopRaN 235]

1 минуту назад, doma сказал:

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

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

у нас предложение. чтобы даже например при просмотре с мобильного футер совсем не прилипал к верху может все же как то сделать минимальныую высоту ? а то посмотрите как с мобильного смотрится

идеальным решением считается прилипание футера к низу окна браузера, за исключением моюильного устройства - телефоа, либо медиа 480

[TopRaN 235]

5 минут назад, TopRaN сказал:

идеальным решением считается прилипание футера к низу окна браузера, за исключением моюильного устройства - телефоа, либо медиа 480

можно обернуть внутренне содержимое блока в див и присвоить ему значение высоты = 100vh, в этом случае содержимое будет = 100% высоты экрана.