Залил код для пользователя Rinat1990, в материале по Похожим материалам для uCoz был запрос на мобильную адптацию.
Предлагаю свой скорый вариант как основу (возможно код наглухо не понравится), просто будет от чего отталкиваться.
Сразу скажу что предлагаю выводить чётное число похожих материалов, так как подразумеваем адаптивность и при уменьшении экрана всё же надо учитывать смотрибельность и читабельность, применяя медиа запрос на этапе к примеру с 480px будем делать не 4 колонки (2 строки), а две (с нечётным показателем в 10 материалов, ясно что будет оставаться пустая позиция справа).
На странице материала и комментариев выводим например:
Код
<p style="text-transform: uppercase;">Похожие материалы: </p> <p><?if($RELATED_ENTRIES$(8))?><?$RELATED_ENTRIES$(8)?><?else?>Похожие материалы не найдены.<?endif?></p> <div class="clear"></div>
Сразу обращаю внимание на
Код
<div class="clear"></div>
, этим мы убираем обтекание, (почему так, в основе многих шаблонов уже есть прописанный этот параметр и точно также или же class="clr", поэтому можно не писать лишний раз правила синтаксиса, если же нет, то читаем тут Сlear.)
В принципе закончили, но добьём стиль медиа запросом, добавим внизу к стилям ещё параметр
Код
@media all and (max-width:480px) { .relatedentry {width:49%; float:left; margin: 0.5%;} }
Ведь для смартфонов думаю будет лучше всё таки две колонки, если всё равно мелковато то можно уменьшить запрос с 620px. "Вообщем типа того и всё такое..." -Beavis & Butthead-
А именно margin, можно одним значением сделать отступ со всех краёв, либо двумя тремя значениями, тут же я 4 значения применил под тестовым шаблоном (где вышло с этими параметрами ровно) и имел ввиду 1-ое отступ 2px сверху 2-ое 2px справа 3-ее снизу и 4-ое слева.
И ещё, всё же советую прочитать пост пользователя SAM ТУТ по поводу исходного содержимого строки списка, и окружающей "требухи" маркированного списка... Хотя честно сам признаюсь и каюсь на тестовом шаблоне я не обрезал обёртку функцией substr, глядя по исходнику там нужно вырезать примерно это
Код
<ul class="uRelatedEntries"> Тут конструкция вида материалов в этой самой обёртке </ul>
Сообщение отредактировал Angerfist - Понедельник, 21 Ноября 2016, 15:47
Всё работает, всё классно спасибо, давно искал такое! Скажите как сделать, что-бы при нажатие на картинку тоже появлялось название, и можно было перейти на страницу материала по клику! Заранее большое спасибо!
Yan4953, по клику должно так и работать, чтоб могли перейти, так как для этого сделали, а чтоб при наведение появлялось название, то нужно добавить title.
Yan4953, по клику должно так и работать, чтоб могли перейти, так как для этого сделали, а чтоб при наведение появлялось название, то нужно добавить title.
За оператором изображение ставим:
Он работает по клику только на тексте а мне надо что-бы еще и по клику на картинку переходил!
Yan4953, если не ошибаюсь, то так поставить и посмотреть, вот с вид материала, где по клику на изображение происходит переход, нужно вытащить и поставить.
Yan4953, если не ошибаюсь, то так поставить и посмотреть, вот с вид материала, где по клику на изображение происходит переход, нужно вытащить и поставить.
