Ответить на тему  [ Сообщений: 10 ] 
Текст поверх картинки в мобильной версии 
Автор Сообщение
Опытный

Зарегистрирован: 05 сен 2011, 21:24
Сообщений: 316
Пол: женский
Репутация: 220
Добавить пункт репутацииВычесть пункт репутации
Сообщение Текст поверх картинки в мобильной версии
День добрый)
Я, через css прописала текст поверх картинки, все работает, но в мобольной версии вылазит
Вот это img{max-width:100%;height:auto;} НЕ РАБОТАЕТ
Пробовала еще следующее
Весь блок
@media(max-width:1300px){#block-views-4e66ab129ba48529da18fd8b607fb5de {max-width:100%;height:auto;}}
и катинку
@media(max-width:1300px){#block-views-4e66ab129ba48529da18fd8b607fb5de img{max-width:100%;height:auto;}}
НИЧЕГО из этого НЕ РАБОТАЕТ

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

На всякий случай напишу код, как я текст картинку прописывала. Может именно там, что-то нужно дописывать?-
Вот он
.imgblock{position:relative;display:inline-block;}
.imgblock img{height:271px;width:470px;}
.imgblock span{display:inline-block;position:absolute;font-size:22px;font-weight:700;word-wrap:break-word;left:0px;color:#fff;padding:20px;bottom: 20px;}

Пожалуйста, подскажите)

_________________
http://layf.info/ - информируйся и развлекайся


24 авг 2017, 16:58
Профиль Отправить личное сообщение WWW
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 918
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 778
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Текст поверх картинки в мобильной версии
Добрый вечер. А вы уверены, что медиа-запрос сработал? В веб инспекторе посмотрите самые верхние стили для изображения.
Ещё может быть, что и не в картинке дело, а какой-то другой блок вылезает. Не плохо было бы взглянуть на ваш код :)

_________________
Не всё валидно, что не видно.


24 авг 2017, 20:05
Профиль Отправить личное сообщение
Опытный

Зарегистрирован: 05 сен 2011, 21:24
Сообщений: 316
Пол: женский
Репутация: 220
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Текст поверх картинки в мобильной версии
Не очень понимаю как это "вы уверены, что медиа-запрос сработал"?

Я проверяла через телефон

Вот этот сайт, проблемы с блоком ИНТЕРЕСНЫЕ ФИШКИ (где надпись на фото)
layf.info

Если не трудно - посмотрите, пожалуйста

Добавлено спустя 42 минуты 15 секунд:
Сделала, может немножко неправильно, но работает - поставила фиксированный размер картинки в мобильной версии - меньший

_________________
http://layf.info/ - информируйся и развлекайся


24 авг 2017, 22:15
Профиль Отправить личное сообщение WWW
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 918
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 778
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Текст поверх картинки в мобильной версии
xxdaaxx писал(а):
Не очень понимаю как это "вы уверены, что медиа-запрос сработал"?

Если медиа-запрос основывается на ширине области просмотра (то есть width), а не на ширине экрана устройства (то есть device-width), то можно с лёгкостью сжимать окно браузера до нужных размеров и смотреть сработали стили или нет. Например, у вас есть общие стили для изображений, "живут" они на 25-й строке ccs документа, а на 325-й расположились стили для максимальной ширины экрана не более 640 пикселей. Так вот сжимаем экран, чтобы он стал менее 640 пикселей и смотрим, с помощью того же ФайрБага, перекрылись ли общие стили теми, которые находятся на 325-й строке.

В вашем случае всё было нормально с изображением. У вас проблема с элементом li, с классами: views-fluid-grid-item
views-fluid-grid-inline views-fluid-grid-item views-row views-row-1 views-row-odd views-row-first views-row-last.
Его ширина фиксирована (500px) и он способствует появлению горизонтальной прокрутки.

_________________
Не всё валидно, что не видно.


25 авг 2017, 12:43
Профиль Отправить личное сообщение
Опытный

Зарегистрирован: 05 сен 2011, 21:24
Сообщений: 316
Пол: женский
Репутация: 220
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Текст поверх картинки в мобильной версии
Да, Точно - это из-за этого li, потому что и сейчас (с маленькой картинкой) прокрутка есть, Подскажите, а это можно как-то исправить? Как прописать правильно, может на меньший размер?

_________________
http://layf.info/ - информируйся и развлекайся


25 авг 2017, 23:12
Профиль Отправить личное сообщение WWW
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 918
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 778
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Текст поверх картинки в мобильной версии
xxdaaxx писал(а):
Как прописать правильно, может на меньший размер?

width: auto;

_________________
Не всё валидно, что не видно.


26 авг 2017, 12:16
Профиль Отправить личное сообщение
Опытный

Зарегистрирован: 05 сен 2011, 21:24
Сообщений: 316
Пол: женский
Репутация: 220
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Текст поверх картинки в мобильной версии
Да, спасибо, так помогло) А не подскажите еще, у меня есть другой класс li с фиксированным размером 300px
Она в мобильной версии меньше экрана (не очень красиво) Как ее прописать, в мобильной версии, на всю ширину экрана? width:100% и width:auto - не работает.

_________________
http://layf.info/ - информируйся и развлекайся


26 авг 2017, 13:47
Профиль Отправить личное сообщение WWW
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 918
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 778
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Текст поверх картинки в мобильной версии
Может быть ширина родительского элемента не даёт ему растянуться на всю ширину, а может быть селектор, для которого вы прописываете свойства, имеет меньший приоритет.
То есть изначально идёт так:
Код:
#menu .item {width: 300px;}

А вы задаёте новые свойства так:
Код:
.item {width: 100%;}

_________________
Не всё валидно, что не видно.


26 авг 2017, 14:13
Профиль Отправить личное сообщение
Опытный

Зарегистрирован: 05 сен 2011, 21:24
Сообщений: 316
Пол: женский
Репутация: 220
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Текст поверх картинки в мобильной версии
То есть, проще говоря, если изначально задана фиксированная ширина(меньшая) - то в моб версии не растянуть ни как?

_________________
http://layf.info/ - информируйся и развлекайся


26 авг 2017, 22:06
Профиль Отправить личное сообщение WWW
Модератор
Аватар пользователя

Зарегистрирован: 09 мар 2010, 00:53
Сообщений: 3947
Репутация: 2593
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Текст поверх картинки в мобильной версии
Если требуется перебить правило #menu .item {width: 300px;}, то недостаточно писать .item {width: 100%;}.
Надо имя писать точно #menu .item {width: 100%;}, если это правило ближе к блоку.
Если имя указать ещё точнее, например body #menu .item {width: 100%;} то оно может перебить правила, написанные позже.

_________________
Не забывайте отдыхать!
www.jscan.ru - ежедневно новые японские сканворды и судоку различной сложности!


26 авг 2017, 22:34
Профиль Отправить личное сообщение WWW
Показать сообщения за:  Сортировать по:  
Ответить на тему   [ Сообщений: 10 ] 
   Похожие темы   Автор   Ответов   Просмотров   Последнее сообщение 
Нет новых непрочитанных сообщений в этой теме Нужно перекодировать файл для другой версии Zend Optimizer

в форуме НЕ НАШЛИ ПОДХОДЯЩЕЙ ВЕТКИ ФОРУМА ДЛЯ СВОЕГО ВОПРОСА

spro1

4

1042

29 дек 2012, 23:50

Beron Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Где можно скачать архив с переводом для версии drupal 6.22?

в форуме Drupal 6

Настюша

2

805

19 июл 2011, 21:42

Настюша Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме где находится файл просмотра товара в virtuemart версии 2

в форуме ИНТЕРНЕТ-МАГАЗИН VIRTUEMART

chosmos

0

1348

26 май 2012, 14:27

chosmos Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме новой версии JOOMLA 1.7.3 отсутствует менеджер разделов

в форуме ФОРМИРОВАНИЕ СТРУКТУРЫ САЙТА И ВОПРОСЫ ПО ФУНКЦИОНИРОВАНИЮ СТАНДАРТНОЙ СБОРКИ JOOMLA

4grapes

3

1258

13 дек 2011, 21:18

Игорь Клещёв Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме введенное в поле текст отображался в текст поле другого сайт

в форуме PHP , БАЗЫ ДАННЫХ, ЛОКАЛЬНЫЙ СЕРВЕР

gorelli

4

865

23 дек 2011, 07:52

gorelli Перейти к последнему сообщению


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 4


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Перейти:  
 cron