WEB-DEV-Braindump/queries.css at main · codeAntariksh/WEB-DEV-Braindump · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/* LG--> SMALL LAPTOPS: 1024px-1280px */

@media (max-width: 72rem ) {
    /* 1150px / 16px = 72 rem */
    /* 72rem * 16px = 1152px */

    html {
        /* 9px / 16px = 56.25% */
        font-size: 56.25%;
    }

    .features-grid-container {
    column-gap: 2rem;
    }

    .cta-section {
    margin-bottom: 20rem;
    }
}

/* MD - TABLETS: 768px-1024px */
@media(max-width: 51rem) {
    /* 815px/16px=51rem */
    /* 51rem * 16px = 50% */

    html {
        /* 8px / 16px = 50% */
        font-size: 50%;
    }
}

/* SM - PHONE LANDSCAPE: 576px - 768px  */

@media (max-width: 43rem) {
    /* 680px / 16px = 43rem */
    /* 43rem * 16px = 688px */

    html {
        font-size: 43.75%;
        /* 7px / 16px = 43.75% */
    }
    .cta-card {
        padding: 8rem 16rem;
    }
    .features-section {
        margin-bottom: 20rem;
    }
    .features-grid-container {
        row-gap: 5rem;
        column-gap: 0.5rem;
    }
}

@media (max-width: 34rem) {
    /* 530px/16px=34rem */
    /* 34rem * 16px = 544px */
    html {
        font-size: 37.5%;
        /* 6px / 16px = 37.5% */
    }
    .hero-heading-break {
        display: none;
    }
    .hero-section {
        height: auto;
    }
    .features-grid-container {
        grid-template-columns: 1fr;
        row-gap: 10rem;
    }
    .feature-img-swap {
        grid-column: auto;
        grid-row: auto;
        max-width: auto;
        width: 70%;
    }
    .cta-card {
        padding: 8rem 6rem;
    }
    .navbar {
        height: auto;
    }
    .feature-img {
        max-width: auto;
        width: 70%;
    }
}