CSS (мобильная версия)

C7
На сайте с 25.01.2009
Offline
107
1433

Здравствуйте.

У меня какая-то странная проблема, те настройки css, которые работают на обычной версии сайта вообще никак не влияют на мобильную версию. Допустим:

#blok1{

border:5px solid #000;

width:200px;

height:170px;

float:left;

padding:15px;

background:#000;

}

#blok1 a {font-family: Arial; font-size: 10pt; color: #929292; text-decoration: none;}

#blok1 a:visited {font-family: Arial; font-size: 10pt; color:#929292;text-decoration: none;}

#blok1 a:hover {font-family: Arial; font-size: 10pt; color: #fff;text-decoration: underline; }

#blok1 img {width: 220px; height:120px;}

Выводит короткие новости на сайте, при этом изначально ссылки цвета #929292, а при наведении становятся белыми и соответственно подчеркиваются.

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

Я так понимаю, нужно как-то по-другому css прописать или что?

Лично я учился создавать и зарабатывать на сайте здесь - манимастер (http://www.moneymaster.ru/?chess77)
I2
На сайте с 07.03.2015
Offline
38
#1

Просмотрите ссылки фаербагом. (сузьте окно браузера)

возможно что там прописаны медиа запросы

Качественная верстка PSD макетов (/ru/forum/974524)
Ragnarok
На сайте с 25.06.2010
Offline
239
#2
indenger20:
(сузьте окно браузера)

В хроме: F12 -> Toggle device mode (левый верхний угол с иконкой телефона) -> меняйте разрешение, как надо

а одни знакомые "веб-разработчики" проверяли адаптивность, увеличивая масштаб %) ctrl+колёсико

//TODO: перестать откладывать на потом
V
На сайте с 25.02.2013
Offline
68
v2g
#3

Бывает, что на некоторых cms под браузер идет отдельный css файл или даже шаблон.

Nunan
На сайте с 15.08.2008
Offline
78
#4

1) Проверте, может стили подключаются только к десктопной версии, тогда будут стоять условия наподобие:

<link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="xxxx.css" />

тогда на меньших разрешениях чем 1000 стили работать не будут

2) Проверте, не подключается ли второй файл стилей только для узких экранов (для смартфонов и тп), опять же через:

<link rel="stylesheet" media="screen and (max-device-width: 640px)"....

В таком случае стили второго файла могут перезаписывать стили первого.

3) Поищите в стилях строки типа:

@media (max-width:780px){

после них могут следовать стили, перезаписывающие свойства #blok1 a

4) Подумайте, может вы просто что-то не доглядели и стили #blok1 a просто не применяются, там где вы их хотите видеть? :)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий