Дизайн мобильной версии в Конструкторе тем 2.X

 
Посетитель
small user social cms
Сообщений: 63
Всем здравствуйте. Возникла такая проблема. Сделал сайт, использую конструктор тем. Возникла проблема с отображением картинки постов в мобильной версии - картинка обрезается. Настройки в пресетах изображений должного результат не принесли, поэтому предполагаю, что нужно подключать дополнительный css для разных разрешений сайта.

Сейчас в мобильной версии картинка поста выглядит так:

Дизайн мобильной версии в Конструкторе тем

То есть нужно сделать так, чтобы в мобильной версии картинка не обрезалась, а вставала строго по ширине. Пробовал сделать по разному, но везде возникают проблемы. Делал обложку поста при помощи свойства max-width: 100%; но это не работает должным образом.

Сам проблемный сайт здесь

Буду благодарен за любой совет, как это сделать)
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1205
Не вижу Ваш код max-width: 100%; в картинке.
Добавил width: 100%; и всё работает http://prntscr.com/q5hazm

P.S. классный шаблон получается
Дополнения для InstantCMS 2 | Готовый сайт Доска объявлений
Реклама
cms
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 3545
max-width: 100% тоже не увидел
По умолчанию в конструкторе тем адаптация идет. Может вы где то "перехимичили" Тема сайта и шаблон сам прикольный. Только используйте не более 2 шрифтов на сайте
Редактировалось: 1 раз (Последний: 3 декабря 2019 в 13:04)
Дизайн для Инстант = Я зарабатываю тут =
= Уроки для Конструктора тем =
Посетитель
small user social cms
Сообщений: 63
Evanescence, а этот метод не повляет на поисковую выдачу? Я где-то читал, что гугл критично относится к такому методу.
Посетитель
small user social cms
Сообщений: 63
Алексей Тимофеев, честно, с самого начала не проверял - адаптируется или нет, так как в шаблон внес очень много своих стилей, которые подключил отдельным файлом в theme.tpl.php
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 3545
makework:
адаптируется или нет
Адаптируется, вот пример http://trans.iscms.ru/news
Дизайн для Инстант = Я зарабатываю тут =
= Уроки для Конструктора тем =
Посетитель
small user social cms
Сообщений: 63
Алексей Тимофеев, да, адаптируется, но я изначально сильно поменял стиль списка отображения контента, поэтому скорее всего, где-то сломал. Но, в принципе, про max-width понял, попробую сделать. А это свойство лучше к изображению применить или к контейнеру изображения?
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1205
makework:
Я где-то читал, что гугл критично относится к такому методу.
Не понял что имеете в виду?
Писать стили в атрибут style? Это я для примера показал, можете указать класс -> картинку и записать width:100%
Дополнения для InstantCMS 2 | Готовый сайт Доска объявлений
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2896
Evanescence:
можете указать класс -> картинку и записать width:100%
За что бедные картинки так мучать? zlo
Украинский для инстант
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1205
Олег Васильевич я, Других вариантов нет, либо в атрибут написать, либо .class img{width:100%}
Дополнения для InstantCMS 2 | Готовый сайт Доска объявлений
Посетитель
small user social cms
Сообщений: 63
Evanescence, перепробовал все. Не помогает. Причем да, если написать условие браузере - срабатывает. Стоит прописать это в таблице стилей - не работает. Пробовал по всякому.

Например:

Код CSS:
  1. .field.ft_image.f_photo { width: 100%; }
Или

Код CSS:
  1. .content.list.item.img {width:100%}
Редактировалось: 3 раз (Последний: 3 декабря 2019 в 21:15)
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2896
Evanescence:
Олег Васильевич я, Других вариантов нет, либо в атрибут написать, либо .class img{width:100%}
1. Так мучить картинки можно только в одном случае: когда больной на голову заказчик хочет именно так
1. Не верю, что нет других вариантов. Вот никак не верю))
Украинский для инстант
Посетитель
small user social cms
Сообщений: 63
Олег Васильевич я, других вариантов правда нет. А может быть, мы просто о них не знаем(
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2896
makework:
других вариантов правда нет
А я не верю))
Пдсказка
Украинский для инстант
Посетитель
small user social cms
Сообщений: 63
Олег Васильевич я:
А я не верю))

В-общем, добился я результата. Помогла вот такая конструкция:

Код CSS:
  1. .content_item .ft_image img, .ft_html img {
  2. display: block;
  3. margin: 0;
  4. max-width: 100%;
  5. }
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.