Skip to content

Commit 5f5d22d

Browse files
rajgthubrajgthub
committed
Add responsive desig for the blog
1 parent b9f0f9d commit 5f5d22d

File tree

3 files changed

+165
-11
lines changed

3 files changed

+165
-11
lines changed

‎css/_abstract.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,38 @@ $blk-col:#000000;
77
display: flex;
88
justify-content: center;
99
align-items: center;
10+
}
11+
// MEDIA QUERY MANAGER
12+
/*
13+
phone 0 - 600px;
14+
tab-port < 900px;
15+
tab-land < 1200px;
16+
normal < 1800px;
17+
big-desk > 1800px
18+
//default 1rem = 16px;
19+
inside media query rem and em are same, set to browser defaule
20+
but research suggests em is better than rem in media query;
21+
*/
22+
@mixin respond ($break-point){
23+
@if $break-point == phone {
24+
@media (max-width: 37.5em) {//600px/16
25+
@content
26+
};
27+
}
28+
@if $break-point == tab-port {
29+
@media (max-width: 56.25em) {//900px/16
30+
@content
31+
};
32+
}
33+
@if $break-point == tab-land {
34+
@media (max-width: 75em) {//1200px/16
35+
@content
36+
};
37+
}
38+
@if $break-point == big-desk {
39+
@media (min-width: 112.5em) {//1800px/16
40+
@content
41+
};
42+
}
43+
1044
}

‎css/style.css‎

Lines changed: 81 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
/*
2+
phone 0 - 600px;
3+
tab-port < 900px;
4+
tab-land < 1200px;
5+
normal < 1800px;
6+
big-desk > 1800px
7+
//default 1rem = 16px;
8+
inside media query rem and em are same, set to browser defaule
9+
but research suggests em is better than rem in media query;
10+
*/
111
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
212
/**
313
* 1. Set default font family to sans-serif.
@@ -411,8 +421,6 @@ th {
411421
/* For example: General styles, Navigation styles, Hero styles, Footer etc. */
412422
/* TIP: When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */
413423
.header {
414-
padding: 0 0.938rem;
415-
margin: 0 auto;
416424
min-width: 37.5rem;
417425
height: 4.375rem;
418426
background-color: #fff;
@@ -432,18 +440,33 @@ th {
432440
}
433441

434442
.container {
435-
width: 60%;
443+
width: 65%;
436444
display: flex;
437445
justify-content: space-between;
438446
}
439447

448+
@media (max-width: 56.25em) {
449+
.container {
450+
width: 100%;
451+
padding: 0 1rem;
452+
justify-content: space-around;
453+
}
454+
}
455+
440456
.navigation {
441-
width: 65%;
457+
width: 75%;
442458
display: flex;
443459
justify-content: center;
444460
align-items: center;
445461
}
446462

463+
@media (max-width: 37.5em) {
464+
.navigation {
465+
opacity: 0;
466+
visibility: hidden;
467+
}
468+
}
469+
447470
.navigation__list {
448471
width: 100%;
449472
display: flex;
@@ -482,17 +505,37 @@ th {
482505
flex-direction: column;
483506
}
484507

508+
@media (max-width: 37.5em) {
509+
.intro__content {
510+
padding: .5rem;
511+
}
512+
}
513+
485514
.intro__h1, .intro__h3 {
486515
color: white;
487516
font-weight: 300;
488517
font-size: 3.125rem;
489518
margin-bottom: 1rem;
490519
}
491520

521+
@media (max-width: 37.5em) {
522+
.intro__h1, .intro__h3 {
523+
font-size: 2.5rem;
524+
text-align: center;
525+
}
526+
}
527+
492528
.intro__h3 {
493529
font-size: 1.563rem;
494530
}
495531

532+
@media (max-width: 37.5em) {
533+
.intro__h3 {
534+
font-size: 1.5rem;
535+
text-align: center;
536+
}
537+
}
538+
496539
.intro__buttons {
497540
color: white;
498541
text-align: center;
@@ -534,6 +577,14 @@ button:hover {
534577
color: #1d1e21;
535578
}
536579

580+
@media (max-width: 56.25em) {
581+
.cases__content {
582+
width: 100%;
583+
padding: 1rem;
584+
margin: 0;
585+
}
586+
}
587+
537588
.cases__content > h2 {
538589
font-size: 2.75rem;
539590
margin: 1.625rem 0 4.125rem;
@@ -542,12 +593,31 @@ button:hover {
542593
align-self: center;
543594
}
544595

596+
@media (max-width: 56.25em) {
597+
.cases__content > h2 {
598+
font-size: 2rem;
599+
margin: 0;
600+
}
601+
}
602+
603+
@media (max-width: 37.5em) {
604+
.cases__content > h2 {
605+
font-size: 1.5rem;
606+
}
607+
}
608+
545609
.cases__devices {
546610
list-style: none;
547611
display: flex;
548612
justify-content: space-between;
549613
}
550614

615+
@media (max-width: 37.5em) {
616+
.cases__devices {
617+
flex-direction: column;
618+
}
619+
}
620+
551621
.cases__devices > li {
552622
display: flex;
553623
flex-direction: column;
@@ -567,6 +637,7 @@ button:hover {
567637
font-weight: 400;
568638
font-size: 1.563rem;
569639
margin: 2.5rem 0px 1.875rem;
640+
text-align: center;
570641
}
571642

572643
.social {
@@ -583,6 +654,12 @@ button:hover {
583654
flex-direction: column;
584655
}
585656

657+
@media (max-width: 37.5em) {
658+
.social__content {
659+
width: 100%;
660+
}
661+
}
662+
586663
.social__content > hr {
587664
border: 0;
588665
border-top: 1px solid #eaebec;

‎css/style.scss‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@
66

77
/* TIP: When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex' */
88
.header {
9-
padding: 0 0.938rem;
10-
margin: 0 auto;
9+
// padding: 0 0.938rem;
10+
// margin: 0 auto;
1111
min-width: 37.5rem;
12+
@include respond(tab-port) {
13+
//
14+
// min-width: 17.5rem;
15+
}
1216
height: 4.375rem;
1317
background-color: #fff;
1418
display:flex;
@@ -21,23 +25,29 @@
2125
}
2226
.logo{
2327
height: 4.375rem;
24-
// width: 4.375rem;
25-
// display: block;
2628
}
2729
}
2830
.container{
29-
width:60%;
31+
width:65%;
3032
display: flex;
3133
justify-content: space-between;
32-
// background-color: green;
34+
@include respond(tab-port) {
35+
width:100%;
36+
padding: 0 1rem;
37+
justify-content: space-around;
38+
}
3339
// @include flx-center;
3440
}
3541
// Navigation Section
3642

3743
.navigation {
3844
// background-color: #fff;
3945
// flex-grow: 1;
40-
width: 65%;
46+
width: 75%;
47+
@include respond(phone) {
48+
opacity: 0;
49+
visibility: hidden;
50+
}
4151
@include flx-center;
4252
&__list{
4353
width: 100%;
@@ -74,16 +84,27 @@
7484
color: #1d1e21;
7585
display: flex;
7686
flex-direction: column;
87+
@include respond(phone) {
88+
padding: .5rem;
89+
}
7790
}
7891
&__h1{
7992
color: white;
8093
font-weight: 300;
8194
font-size: 3.125rem;
8295
margin-bottom: 1rem;
96+
@include respond(phone) {
97+
font-size: 2.5rem;
98+
text-align: center;
99+
}
83100
}
84101
&__h3{
85102
@extend .intro__h1;
86103
font-size: 1.563rem;
104+
@include respond(phone) {
105+
font-size: 1.5rem;
106+
text-align: center;
107+
}
87108
}
88109
&__buttons {
89110
color: white;
@@ -119,22 +140,39 @@ button:hover {
119140
flex-direction: column;
120141
padding: 0;
121142
color: #1d1e21;
143+
@include respond(tab-port) {
144+
width:100%;
145+
padding: 1rem;
146+
margin: 0;
147+
}
122148
&>h2{
123149
font-size: 2.75rem;
124150
margin: 1.625rem 0 4.125rem;
125151
margin-left: 6rem;
126152
font-weight: 300;
127153
align-self: center;
154+
@include respond(tab-port) {
155+
font-size:2rem;
156+
margin: 0;
157+
}
158+
@include respond(phone) {
159+
font-size:1.5rem;
160+
161+
}
128162
}
129163
}
130164
&__devices{
131165
list-style: none;
132166
display: flex;
133167
justify-content: space-between;
168+
@include respond(phone) {
169+
flex-direction: column;
170+
}
134171
&>li{
135172
display: flex;
136173
flex-direction: column;
137174

175+
138176
}
139177
&>li:not(:last-child){
140178
margin-right: 1rem;
@@ -152,6 +190,7 @@ button:hover {
152190
font-weight: 400;
153191
font-size: 1.563rem;
154192
margin: 2.5rem 0px 1.875rem;
193+
text-align: center;
155194
}
156195
}
157196
}
@@ -169,6 +208,10 @@ button:hover {
169208
width: 60%;
170209
flex-direction: column;
171210
// background-color: green;
211+
@include respond(phone) {
212+
width:100%;
213+
}
214+
172215
&>hr{
173216
border: 0;
174217
border-top: 1px solid #eaebec;

0 commit comments

Comments
 (0)