Skip to content

Commit d4a46a6

Browse files
PratheepVPratheepV
committed
Responsive changes
1 parent 84a8a6a commit d4a46a6

5 files changed

Lines changed: 396 additions & 192 deletions

File tree

‎src/components/Footer.scss‎

Lines changed: 75 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
.footer_docs{
22
margin-top: 0px;
33
position: relative;
4-
top: 0px;
4+
top: 40px;
5+
@media (max-width: 576px) {
6+
overflow: hidden;
7+
top: 20px;
8+
}
59
hr{
6-
width:100%;
710
margin-top: 30px;
811
margin-bottom: 30px;
12+
@media (max-width: 576px) {
13+
margin-top: 15px;
14+
margin-bottom: 15px;
15+
}
916
}
1017
h2{
1118
margin-top: 3px!important;
@@ -16,9 +23,36 @@
1623
}
1724
.helpfull{
1825
display: flex;
26+
justify-content: center;
27+
@media (max-width: 576px) {
28+
display: block;
29+
justify-content: inherit;
30+
text-align: center;
31+
}
1932
.text_h2{
20-
margin-left: 80px;
33+
margin-left: 0;
2134
margin-right: 50px;
35+
@media (max-width: 576px) {
36+
margin-right: 0;
37+
}
38+
}
39+
button {
40+
@media (max-width: 576px) {
41+
display: inline-block;
42+
}
43+
svg,
44+
h2 {
45+
@media (max-width: 576px) {
46+
display: inline-block;
47+
vertical-align: middle;
48+
margin: 0 20px 0 0 !important;
49+
}
50+
}
51+
}
52+
button.active {
53+
opacity: 0.2;
54+
cursor: default;
55+
pointer-events: none;
2256
}
2357
svg{
2458
margin-top: 8px;
@@ -50,6 +84,10 @@
5084
display: flex;
5185
padding: 18px 18px 18px 28px;
5286
border-radius: 6px;
87+
@media (max-width: 576px) {
88+
display: block;
89+
padding: 18px;
90+
}
5391
.green_text{
5492
font-size: 16px;
5593
line-height: 26px;
@@ -88,6 +126,9 @@
88126
}
89127
.btn_width{
90128
max-width: 30%;
129+
@media (max-width: 576px) {
130+
max-width: 100%;
131+
}
91132
button{
92133
color: #FFF;
93134
margin-top: 11px;
@@ -114,6 +155,10 @@
114155
cursor: pointer;
115156
padding-left: 20px;
116157
padding-right: 20px;
158+
@media (max-width: 576px) {
159+
right: 0;
160+
min-width: 100%;
161+
}
117162
}
118163
}
119164
.hide {
@@ -130,7 +175,11 @@
130175
.subscribe-success {
131176
display: flex;
132177
justify-content: center;
178+
<<<<<<< HEAD
133179
flex-basis: 34%;
180+
=======
181+
flex-basis: 40%;
182+
>>>>>>> b7e17ed (Responsive changes)
134183
align-items: center;
135184
h4 {
136185
color: #03A973;
@@ -139,26 +188,33 @@
139188
}
140189

141190
.footer_greyBox{
142-
margin-top: 30px;
143-
background-color: #F6F7F9;
144-
padding: 30px 15px 15px 15px;
145-
svg{
146-
margin: auto;
147-
display: block;
148-
}
191+
margin-top: 30px;
192+
background-color: #F6F7F9;
193+
padding: 30px 15px 15px 15px;
194+
svg{
195+
margin: auto;
196+
display: block;
197+
}
149198
p{
150199
font-weight: 300;
151200
text-align: center;
152201
}
153202
.p_flex{
154203
display: flex;
204+
justify-content: center;
155205
width: 100%;
156-
margin-left: 120px;
157206
margin-top: -15px;
207+
@media (max-width: 576px) {
208+
margin-left: 0;
209+
margin-bottom: 20px;
210+
}
158211
p{
159212
line-height: 12px;
160213
padding: 0px 10px;
161214
height: 15px;
215+
@media (max-width: 576px) {
216+
height: auto;
217+
}
162218
a{
163219
color: #03A973;
164220
text-decoration: underline;
@@ -187,7 +243,15 @@
187243
display: flex;
188244
margin-top: 15px;
189245
margin-bottom: 30px;
246+
@media (max-width: 576px) {
247+
margin-bottom: 15px;
248+
}
190249
p{
250+
a{
251+
font-size: 12px;
252+
color: #7F7F7F;
253+
text-align: initial;
254+
}
191255
font-size: 12px;
192256
color: #7F7F7F;
193257
text-align: initial;

‎src/components/LeftNav.scss‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
}
4444

4545
.root > .parent{
46+
a,
4647
button {
4748
font-weight: 600;
4849
&:hover{
@@ -79,22 +80,23 @@
7980
transform: rotate(0deg);
8081
}
8182
}
82-
83+
& a,
8384
& button {
8485
background: none;
8586
color: inherit;
8687
display: inline-block;
8788
border: none;
8889
padding: 0;
8990
text-align: inherit;
91+
font-weight: 400;
9092
font-size: 14px;
9193
outline: inherit;
9294
text-transform: capitalize;
9395
&:hover{
9496
color: #1AA874;
9597
}
9698
@media (max-width: 576px) {
97-
font-size: 13px;
99+
font-size: 13px;
98100
}
99101
}
100102

@@ -212,10 +214,56 @@
212214
.hamburger{
213215
display: none;
214216
@media (max-width: 576px) {
215-
display: block;
216217
position: absolute;
218+
z-index: 9;
217219
top: 0;
218-
left: 30px;
220+
left: 0;
221+
display: block;
222+
padding: 0;
223+
// background-color: #f9fafb;
224+
}
225+
> button {
226+
@media (max-width: 576px) {
227+
position: absolute;
228+
top: 15px;
229+
left: 15px;
230+
z-index: 9;
231+
}
232+
}
233+
> svg {
234+
@media (max-width: 576px) {
235+
position: relative;
236+
top: 15px;
237+
left: 15px;
238+
}
239+
}
240+
}
241+
.hamburger .leftNav {
242+
@media (max-width: 576px) {
243+
padding-bottom: 1.2rem;
244+
}
245+
}
246+
.hamburger + nav,
247+
.hamburger + nav + div .w-full aside {
248+
@media (max-width: 576px) {
249+
display: none;
250+
}
251+
}
252+
.hamburger + nav + div,
253+
.hamburger + nav + div .w-full,
254+
.hamburger + nav + div .w-full main {
255+
@media (max-width: 576px) {
256+
display: block;
257+
width: 100%;
258+
margin: 0;
259+
}
260+
}
261+
.hamburger + nav + div .pagination_buttons {
262+
@media (max-width: 576px) {
263+
display: block;
264+
width: 100%;
265+
margin: 0;
266+
padding: 0 15px;
219267
}
220268
}
221269

‎src/components/layout.scss‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Footer has font Open Sans
22
* {
3-
font-family:'Source Sans Pro',Helvetica,Arial,sans-serif;
3+
font-family:'Source Sans Pro',Helvetica,Arial,sans-serif;
44
color: #183247;
55
font-size: 15px;
66
//font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica, Arial, sans-serif;
@@ -33,20 +33,29 @@ h1,
3333
.h1 {
3434
margin-top: 20px;
3535
font-family:'Source Sans Pro',Helvetica,Arial,sans-serif;
36-
margin-bottom: 20px!important;
36+
margin-bottom: 20px !important;
3737
font-size: 35px !important;
3838
line-height: 45px !important;
39-
font-weight: 800!important;
39+
font-weight: 800 !important;
40+
@media (max-width: 576px) {
41+
font-size: 18px !important;
42+
line-height: 36px !important;
43+
margin-bottom: 15px !important;
44+
}
4045
}
4146

4247
h2,
4348
.h2 {
4449
margin-top: 40px;
4550
font-family:'Source Sans Pro',Helvetica,Arial,sans-serif;
46-
margin-bottom: 25px!important;
51+
margin-bottom: 15px!important;
4752
font-size: 25px;
4853
font-weight: 800;
4954
line-height: 1.2631578947;
55+
@media (max-width: 576px) {
56+
font-size: 16px !important;
57+
line-height: 32px !important;
58+
}
5059
a{
5160
color: inherit!important;
5261
font-weight: 700!important;
@@ -79,24 +88,26 @@ p {
7988
color: #183247;
8089
margin-top: 14px!important;
8190
margin-bottom: 14px!important;
82-
line-height: 26.25px;
8391
font-family:'Source Sans Pro',Helvetica,Arial,sans-serif;
92+
@media (max-width: 576px) {
93+
font-size: 14px;
94+
}
8495
}
8596

8697
span{
8798
hr{
88-
margin-top: 30px!important;
89-
margin-bottom: 30px!important;
90-
//&:first-child{
91-
// margin-bottom: 25px!important;
92-
//}
99+
margin-top: 30px !important;
100+
margin-bottom: 30px !important;
101+
@media (max-width: 576px) {
102+
margin-top: 15px !important;
103+
margin-bottom: 15px !important;
104+
}
93105
}
94106
}
95107

96108
blockquote{
97-
//margin-left: 30px!important;
98-
//margin-top: 30px!important;
99-
//margin-bottom: 30px!important;
109+
margin-top: 30px!important;
110+
margin-bottom: 30px!important;
100111
border-left: 2px solid #03A973!important;
101112
h3{
102113
margin-bottom: 0px!important;
@@ -121,7 +132,7 @@ table, th, td {
121132
border-collapse: collapse;
122133
}
123134

124-
// refresh 2021 layout changes
135+
// refresh 2021 layout changes
125136
.container {
126137
padding-right: 24px;
127138
padding-left: 24px;

0 commit comments

Comments
 (0)