MediaWiki:Mobile.css: различия между версиями
Перейти к навигации
Перейти к поиску
Gryadka (обсуждение | вклад) Нет описания правки |
Gryadka (обсуждение | вклад) Нет описания правки |
||
Строка 7: | Строка 7: | ||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
.event-block { | .event-block { | ||
width: 100%; /* Блоки занимают всю ширину экрана */ | |||
width: 100%; /* Блоки занимают всю | |||
margin-right: 0; /* Убираем отступ справа */ | margin-right: 0; /* Убираем отступ справа */ | ||
padding: 10px; /* Добавляем немного внутреннего отступа */ | |||
} | } | ||
.event-content { | |||
/* Если у блоков есть другие внутренние элементы, возможно, их тоже стоит адаптировать */ | |||
} | |||
.event-block .event-details h2, | .event-block .event-details h2, | ||
.event-block .event-details p { | .event-block .event-details p { | ||
word-wrap: break-word; /* Переносит длинные слова на новую строку */ | |||
overflow-wrap: break-word; /* Альтернатива для word-wrap */ | |||
} | |||
} | } | ||
Версия от 07:20, 20 декабря 2023
@media (max-width: 600px) { .event-container { overflow-x: hidden; /* Отключаем горизонтальный скролл на мобильных устройствах */ } } @media (max-width: 600px) { .event-block { width: 100%; /* Блоки занимают всю ширину экрана */ margin-right: 0; /* Убираем отступ справа */ padding: 10px; /* Добавляем немного внутреннего отступа */ } .event-content { /* Если у блоков есть другие внутренние элементы, возможно, их тоже стоит адаптировать */ } .event-block .event-details h2, .event-block .event-details p { word-wrap: break-word; /* Переносит длинные слова на новую строку */ overflow-wrap: break-word; /* Альтернатива для word-wrap */ } } .header-container.header-chrome { background: url('/images/f/f2/Shapka.png') no-repeat top left; background-color: #ffffff; background-size: 450px; box-shadow: inset 0 -2px 3px rgba(0,0,0,0.1); } .search-box { text-align: right; } .search-box .search { background-color: #ffffff; border-color: transparent; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); color: var(--text-color); } .search-box .search::placeholder { color: var(--byline-color); } .mw-ui-background-icon-search { background-image: var(--searchbutton-icon); } .overlay.search-overlay { background: var(--body-main); } .overlay.search-overlay .results, .overlay.search-overlay .search-feedback { background-color: var(--body-light); } .overlay.search-overlay .search-content { border-color: var(--body-mid); } .event-container { display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; overflow-x: auto; /* добавляет горизонтальный скролл, если содержимое выходит за пределы */ scrollbar-width: none; /* Для Firefox */ -ms-overflow-style: none; /* Для Internet Explorer 10+ */ } .event-container::-webkit-scrollbar { display: none; /* Для WebKit браузеров, таких как Chrome и Safari */ } .event-block { flex: 1 0 auto; padding: 10px; margin-right: 20px; border: 1px solid rgba(0, 0, 0, 0.1); width: 400px; /* Установите максимальную ширину блока по вашему желанию */ height: 400px; /* Установите максимальную ширину блока по вашему желанию */ flex-shrink: 0; } .event-container .event-block:first-child { margin-left: 0px; /* или любое другое значение, которое подходит */ } .event-content { display: flex; flex-direction: column; max-width: 100%; /* Используйте 100% для автоматического соответствия ширине блока */ } .event-image { /* Стили для изображения */ } .event-details { /* Стили для деталей события */ overflow: hidden; /* Обрезать текст, который выходит за пределы блока */ }