CodersCamp2020.Project.HTML-CSS.BusinessCard/queries.css at main · JustynaSmoliga/CodersCamp2020.Project.HTML-CSS.BusinessCard · 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
88
89
90
91
92
93
94
 @media only screen and (max-width:1023px) {
     .about-us .paragraph {
         font-size: 0.7rem;
     }
     .offer .card {
         margin: 2.5% 2.5%;
     }
     .grid {
         width: 80%;
     }
 }

 @media only screen and (max-width: 767px) {
     html {
         font-size: 24px;
     }
     header div {
         height: 24rem;
     }
     .about-us .photo {
         width: 220px;
         height: 220px;
     }
 }

 @media only screen and (max-width: 500px) {
     h1 {
         font-size: 30px;
     }
     h1::after {
         margin-bottom: 40px;
     }
     header div {
         height: 20rem;
     }
     .main-nav {
         justify-content: space-evenly;
     }
     .main-nav div {
         display: none;
     }
     .main-nav a {
         font-size: 0.8rem;
     }
     .main-text {
         font-size: 1.6rem;
     }
     .about-us-card {
         flex-direction: column;
     }
     .about-us .paragraph {
         width: 90%;
         padding-left: 0;
         padding-top: 5%;
         margin: auto;
     }
     .contact {
         padding-bottom: 10%;
     }
     .grid {
         width: 92%;
     }
     form {
         grid-template-columns: 1fr;
         grid-gap: 16px;
         padding: 3% 5% 3% 2%;
     }
     label {
         grid-column: 1/2;
         text-align: left;
     }
     input,
     textarea {
         grid-column: 1/2;
     }
     .social-links div:nth-child(2),
     .social-links div:nth-child(4),
     .social-links div:nth-child(6),
     .social-links div:nth-child(8) {
         height: 10%;
     }
     footer div {
         font-size: 0.7rem;
     }
 }

 @media only screen and (max-width: 375px) {
     .main-nav a:link,
     .main-nav a:visited {
         margin-left: 0.1%;
         margin-right: 0.1%;
         font-size: 14px;
     }
 }