Skip to content

Commit 5af7a24

Browse files
thecodedealerthecodedealer
committed
media querries
1 parent 2f698e7 commit 5af7a24

5 files changed

Lines changed: 385 additions & 8 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -453,7 +453,7 @@ <h4>Contact me here</h4>
453453
<div class="contact-item">
454454
<div class="icon">
455455
<i class="fas fa-map-marker-alt"></i>
456-
Location
456+
<span>Location</span>
457457
</div>
458458
<p>
459459
: London, united Kingdom

‎styles/_media.scss‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
.about-container .left-about p{
2+
padding-left: 0;
3+
}
4+
5+
@media screen and (max-width: 395px) {
6+
header{
7+
padding: 0 !important;
8+
}
9+
.theme-btn{
10+
width: 50px;
11+
height: 50px;
12+
}
13+
.header-content{
14+
grid-template-columns: repeat(1, 1fr);
15+
padding-bottom: 6rem;
16+
}
17+
18+
.left-header{
19+
.h-shape{
20+
display: none;
21+
}
22+
}
23+
.right-header{
24+
grid-row: 1;
25+
padding-right: 0rem !important;
26+
width: 90%;
27+
margin: 0 auto;
28+
.name{
29+
font-size: 2.5rem !important;
30+
text-align: center;
31+
padding-top: 3rem;
32+
}
33+
}
34+
.header-content .left-header .image{
35+
margin: 0 auto;
36+
width: 90%;
37+
}
38+
39+
.controlls{
40+
top: auto;
41+
bottom: 0;
42+
flex-direction: row;
43+
justify-content: center;
44+
left: 50%;
45+
transform: translateX(-50%);
46+
width: 100%;
47+
background-color: var(--color-grey-5);
48+
.control{
49+
margin: 1rem .3rem;
50+
}
51+
}
52+
53+
.about-container{
54+
grid-template-columns: repeat(1, 1fr);
55+
.right-about{
56+
grid-template-columns: repeat(1, 1fr);
57+
padding-top: 2.5rem;
58+
}
59+
.left-about{
60+
padding-right: 0;
61+
p{
62+
padding-left: 0;
63+
}
64+
}
65+
}
66+
67+
.timeline{
68+
grid-template-columns: repeat(1, 1fr);
69+
padding-bottom: 6rem;
70+
}
71+
72+
.section{
73+
padding: 2rem 2.5rem !important;
74+
}
75+
76+
.about-stats{
77+
.progress-bars{
78+
grid-template-columns: repeat(1, 1fr);
79+
}
80+
}
81+
82+
.portfolios{
83+
grid-template-columns: repeat(1, 1fr);
84+
padding-bottom: 6rem;
85+
margin-top: 1rem;
86+
}
87+
88+
.blogs{
89+
grid-template-columns: repeat(1, 1fr);
90+
padding-bottom: 6rem;
91+
}
92+
93+
.contact-content-con{
94+
flex-direction: column;
95+
.right-contact{
96+
margin-left: 0;
97+
margin-top: 2.5rem;
98+
}
99+
100+
}
101+
.contact-content-con .right-contact .i-c-2{
102+
flex-direction: column;
103+
}
104+
.contact-content-con .right-contact .i-c-2 :last-child{
105+
margin-left: 0;
106+
margin-top: 1.5rem;
107+
}
108+
109+
.contact-content-con .right-contact{
110+
margin-bottom: 6rem;
111+
}
112+
113+
.contact-item{
114+
flex-direction: column;
115+
margin: 1rem 0;
116+
p{
117+
font-size: 15px;
118+
color: var(--color-grey-2);
119+
}
120+
span{
121+
font-size: 15px;
122+
}
123+
.icon{
124+
grid-template-columns: 25px 1fr;
125+
}
126+
}
127+
128+
129+
.main-title{
130+
h2{
131+
font-size: 2rem;
132+
span{
133+
font-size: 2.3rem;
134+
}
135+
.bg-text{
136+
font-size: 2.3rem;
137+
}
138+
}
139+
}
140+
}
141+
142+
@media screen and (max-width:1432px){
143+
.section{
144+
padding: 7rem 11rem;
145+
}
146+
}
147+
148+
149+
@media screen and (max-width:1070px){
150+
.about-container{
151+
grid-template-columns: repeat(1, 1fr);
152+
.right-about{
153+
padding-top: 2.5rem;
154+
}
155+
}
156+
.main-title{
157+
h2{
158+
font-size: 4rem;
159+
span{
160+
font-size: 4rem;
161+
}
162+
.bg-text{
163+
font-size: 4.5rem;
164+
}
165+
}
166+
}
167+
}
168+
169+
@media screen and (max-width:970px){
170+
.section{
171+
padding: 7rem 6rem;
172+
}
173+
.about-container .left-about{
174+
padding-right: 0rem;
175+
}
176+
}
177+
@media screen and (max-width:700px){
178+
.section{
179+
padding: 7rem 3rem;
180+
}
181+
.about-stats .progress-bars{
182+
grid-template-columns: repeat(1, 1fr);
183+
}
184+
}

0 commit comments

Comments
 (0)