#p202181,envy написал(а):Здравствуйте. Имеется следующая проблема: я оформила верхние ссылки меню, сделала подчёркивание при наведении, все с пк работает отлично. Но в моб версии какая-то фигня.
Суть проблемы:
как должно быть:
Скорее всего надо прописать правило для моб версии, но я не знаю как : ((
upd: а, и при наведении какая-то ерунда выходит. В общем надо прописать правила, чтобы коды ПК версии и коды для мобилы не наслаивались на друг друга. Надеюсь, объяснила
Привет. Скорее всего, есть поля, сделанные через margin/padding.
Я бы разобралась точнее, но не могу посмотреть сам сайт.
Для мобильной версии используются медиа запросы вида @media (условие) and (условие) {}.
Вместо условий нужно прописать ширину экрана. Для мобильной версии это может быть приблизительно так:
@media (min-wigth: 320px) and (max-width: 768px) {
//вот тут стили, которые нужны, чтобы работали на мобилке
.имя_класса {
//стили
//стили
//стили
}
}
Если нужно, чтобы коды ПК и мобилки не наслаивались, то можно задать бОльшую специфичность нужным стилям (накинуть класс или тег), сделать все медиа-запросы двойными (с минимальной и максимальной шириной, как в примере), чтобы они применялись только и исключительно в нужном промежутке или переопределять/сбрасывать ненужные стили в блоке со следующим разрешением.
Отредактировано Dispatcher (01.05.24 20:30)