Question

Здравствуйте! Я использую стандартный шаблон № 1081, оптимизированный для мобильных устройств, согласно:

http://manual.ucoz.net/board/10-1-0-564

Список тем, которые оптимизированы для мобильных устройств:

1041, 1051, 1061, 1062, 1063, 1064, 1071, 1072, 1073, 1074, 1075, 1080, 1081, 1082, 1083, 1084, 1085, 1086, 1087, 1088, 1089, 1090, 1091, 1101, 1131, 1132, 1133, 1134, 1141, 1161, 1171, 1181, 1211, 1221, 1231, 1241, 1251, 1252, 1253, 1254, 1255, 1256, 1257, 1261, 1271, 1281, 1311, 1321, 1322, 1323, 2001, 2011, 2012

Однако на странице материала и комментариев к нему картинка смещается вправо (в мобильном устройстве). Что нужно дописать в CSS, чтобы это поправить?

Answer 1

В стилях ищем строку номер 484:

.eMessage img,
.eText img {
 max-width: 100%;
 margin: 5px !important;
}

добавьте выделенное красным, тогда с фото будет все впорядке.

Comments

Посталил. К сожалению картинка и текст по-прежнему съезжают вправо за границы поля

---

Илья Левченко,

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

---

Большое спасибо! Сработало. Единственное, на тех страницах, где стоит плеер ютуб (например здесь: http://vsthouse.ru/load/vst_plaginy/svedenie_i_mastering/audiority_echoes_t7e_1_0_0_vst_aax_au_win_osx_x86_x64_dilehj/11-1-0-19862)  картинка с текстом все равно смещается вправо, на ширину окна плеера. Это можно поправить?

---

Илья Левченко,

Поправить можно так, в стили прописать:

.eMessage iframe, .eText iframe {max-width:100%!important;}

---

Вот спасибо! С меня для вас будет отдельная благодарность ;) Это 100%  Последний вопрос, может поможете?  В левом блоке осталось смещение фона вправо.  ссылка на фон левого блока: http://vsthouse.ru/FOTO_1081/FON_LEV.BLOKA.png  Возможно ли исправить?

---

Илья Левченко,

В стили аналогично в самый низ допишите:

.b-sidebar, .b-logo {margin:0 -10px!important;}

выделил красным, это отступ левого контейнера от правого, отрегулируйте пропишите как лучше регулируя значение 10.

---

.b-sidebar, .b-logo {margin:0 -1px!important;}

поставил так (у меня расстояния между блоками почти нет)

В мобильном устройстве все по-прежнему.

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

В обычном браузере (на компьютере) если сворачивать окно браузера (уменьшать окно), этот фон начинает размножаться :)

см скриншот

---

Илья Левченко,

Проще заменить фон на цвет заливку в стилях в строке 802:

background: url(http://vsthouse.ru/FOTO_1081/FON_LEV.BLOKA.png);

заменить на:

background: #fdfdfd;

так как текущее фото фиксированных размеров и будет дублироваться если растягивать окно браузера. Также стоило бы добавить, что так не проверяю адаптивность растягивая окно браузера, это неправильно, в браузерах уже встроен инструментарий для проверки адаптивности, запускается комбинацией CTRL+SHIFT+M при активном инспекторе кода .

---

Картинка фона имеет не сплошной цвет, цвет справа - более темнее. За счет чего получается плавный переход между левым и центральным блоками. Сайт и так страшный как черт, глазу некуда упасть. А так хоть кааое-то разнообразие. Поэтому менять фон на обычный цвет не хочется. Ну раз ничего сделать нельзя, пусть пока так и остается ((  А может как-то можно цвет задать градиентным (чтобы он был темнее в правой стороне)? Или это уже другая история?

---

Илья Левченко,

Изучите материал http://htmlbook.ru/css3-na-primerakh/lineinyi-gradient возможно что и получится.

---

ОК. Спасибо за помощь! Благодарность отправил :)

---

Здравствуйте! Сегодня проверил сайт в разных браузерах на мобильном устройстве.  1. В хроме, мозиле, яндекс браузере, опере все нормально, однако на некоторых страницах все-таки происходит смещение текста комментариев. Вот здесь это видно: http://vsthouse.ru/load/vst_i_instrumenty/sintezatory/spectrasonics_omnisphere_2_v2_0_3d_vsti_rtas_aax_au_x86_x64_dvd_1_8_gibridnyj_sintezator/3-1-0-12292-0-0-0-1511519204  Это можно исправить?  2. В опере мини картинки, текст и комментарии смещаются везде. Это недостаток оперы мини? Или для этого браузера нужно что-то дополнительно прописать, чтобы сайт корректно отображался?  3. В яндекс браузере, опере, опере мини не удается войти на сайт через соц. сеть, включая юкоз (кнопка "U")  Если сможете ответить на эти вопросы, буду благодарен.

---

Илья Левченко,

Посмотрел. Извините, но там кроме комментариев хватает что адаптировать. За доработкой адаптивности обращайтесь к фрилансерам https://upartner.pro/

---

ОК, спасибо за помощь.