საიტის აწყობა: რესპონსივი, მთავარი გვერდი

მოცემულ ვიდეოში ვაწყობთ მთავარი გვერდის რესპონსივ დიზაინს

/* laptops */
@media screen and (max-width: 992px) {
    .container {
        width: 768px;
    }
}
/* tablets */
@media screen and (max-width: 768px) {
    .container {
        width: 576px;
    }
    .main-category-item {
        padding: 10px;
    }
    .main-category-item h3 { 
        font-size: 14px;
        margin: 0;
    }
    .blog-main-container {
        gap: 15px 0;
    }
    .blog-container {
        grid-column: 1 / span 4;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .main-category-item:first-child,
    .main-category-item:nth-child(3) {
        grid-column: 1 / span 2;
    }
    .main-category-item:nth-child(2),
    .main-category-item:nth-child(4) {
        grid-column: 3 / span 4;
    }
    .category-navigation-list {
        grid-column: 1 / span 4;
        display: flex;
        overflow: auto;
        gap: 0 15px;
    }
    .blog-container {
        grid-column: 1 / span 4;
    }
}
/* mobile phones */
@media screen and (max-width: 576px) {
    .container {
        width: 100%;
        padding-inline: 15px;
    }
    .blog-container {
        grid-column: 1 / span 4;
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}