.item-container { display: flex; flex-direction: column; align-items: center; } .filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 15px; background-color: #f5f5f5; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .filter-group { display: flex; align-items: center; margin-bottom: 10px; } .filter-group label { margin-right: 15px; font-weight: bold; color: #333; } .filter-group .ant-picker, .filter-group .ant-input-number, .filter-group .ant-input, .filter-group .ant-select { margin-right: 15px; width: 180px; } .filter-group .ant-select { max-width: 180px; } .filter-group .ant-picker { width: 100%; } .filter-group .ant-input-number { width: 100%; } .filter-group .ant-input { width: 100%; } @media screen and (max-width: 768px) { .filters { flex-direction: column; align-items: stretch; padding: 10px; } .filter-group { margin-bottom: 15px; } .filter-group label { margin-bottom: 5px; } .filter-group .ant-picker, .filter-group .ant-input-number, .filter-group .ant-input, .filter-group .ant-select { margin-right: 0; margin-bottom: 5px; width: auto; max-width: 100%; } } .item-list { width: 100%; max-width:50vw; } .pagination { margin-top: 20px; } .pagination button { margin: 0 5px; } .item-container .item-list .ant-col { display: flex; justify-content: center; } .item-container .item-list .ant-col .gutter-row { margin-bottom: 20px; }