MediaWiki:Common.css: відмінності між версіями

нема опису редагування
Немає опису редагування
Мітка: Скасовано
Немає опису редагування
Мітка: Скасовано
Рядок 310: Рядок 310:
}
}


/* Стилі для трьох колонок на головній сторінці */
.main-page-column {
.main-page-column {
     float: left;
     display: inline-block;
     width: calc(33.333% - 20px); /* віднімаємо марджини між колонками */
    vertical-align: top;
     margin-right: 15px;
     width: calc(33.333% - 20px); /* Subtract 10px for margins on both sides */
     margin: 0 10px; /* Margin for spacing between columns */
     height: 180px;
     height: 180px;
    background-color: #f8f9fa; /* світло-сірий фон, можна змінити на свій колір */
     text-align: center;
     text-align: center; /* текст (заголовок) буде по центру */
     box-sizing: border-box;
     box-sizing: border-box; /* включаємо padding і border в загальну ширину */
     align-items: center;
     display: flex;
    flex-direction: column;
     justify-content: center;
     justify-content: center;
     align-items: center;
     background-color: #f8f9fa;
}
    border: 1px solid #ccc;
 
     padding: 10px;
.main-page-column:last-child {
     margin-right: 0; /* останній елемент не матиме правого марджину */
}
}


@media (max-width: 760px) {
@media (max-width: 760px) {
     .main-page-column {
     .main-page-column {
         width: 100%; /* на мобільних - повна ширина */
         width: 100%; /* full width on small screens */
         margin-right: 0;
         margin: 10px 0; /* Adjust margin for vertical stacking */
        margin-bottom: 15px; /* додаємо відступ між колонками, які стають рядами */
    }
    .main-page-column:last-child {
        margin-bottom: 0; /* останній елемент не матиме нижнього марджину */
     }
     }
}
}