3415
редагувань
Admin (обговорення | внесок) Немає опису редагування Мітка: Скасовано |
Admin (обговорення | внесок) Немає опису редагування Мітка: Скасовано |
||
Рядок 311: | Рядок 311: | ||
/* Main Page Columns Layout */ | /* Main Page Columns Layout */ | ||
/* | .main-page-container { | ||
display: flex; /* Uses flexbox to layout children horizontally */ | |||
justify-content: space-between; /* Distributes space between columns */ | |||
flex-wrap: wrap; /* Allows items to wrap onto next line as needed */ | |||
} | |||
.main-page-column { | .main-page-column { | ||
flex: 1 1 calc(33% - 10px); /* Flex grow, shrink and basis */ | |||
flex | |||
box-sizing: border-box; | box-sizing: border-box; | ||
height: 160px; | height: 160px; | ||
text-align: center; | text-align: center; | ||
background-color: #f8f9fa; | background-color: #f8f9fa; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
padding: 10px; /* | padding: 10px; | ||
margin-right: 15px; /* Margin between columns */ | |||
} | } | ||
.main-page-column:last-child { | .main-page-column:last-child { | ||
margin-right: 0; /* | margin-right: 0; /* No margin on the right for the last column */ | ||
} | } | ||
@media (max-width: 760px) { | @media (max-width: 760px) { | ||
.main-page-container { | |||
flex-direction: column; /* Stacks columns vertically on small screens */ | |||
} | |||
.main-page-column { | .main-page-column { | ||
margin-right: 0; /* Resets margin for mobile view */ | |||
margin-bottom: 15px; /* Space between stacked columns */ | |||
margin-bottom: | flex-basis: 100%; /* Takes full width on small screens */ | ||
} | |||
.main-page-column:last-child { | |||
margin-bottom: 0; /* No bottom margin for the last item */ | |||
} | } | ||
} | } |