Skip to content

GitLab

S
scratch-www
Commit 8c8052c0 authored by Karishma Chadha's avatar Karishma Chadha
Browse files
Options

Fix 4-column (mobile) responsiveness of schools and community sub-sections

parent 64bdc9eb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 223 additions and 68 deletions
src/views/annual-report/annual-report.jsx
View file @ 8c8052c0
This diff is collapsed.
src/views/annual-report/annual-report.scss
View file @ 8c8052c0
...@@ -136,7 +136,7 @@ p { ...@@ -136,7 +136,7 @@ p {
@media #{$medium-and-intermediate} { @media #{$medium-and-intermediate} {
text-align: left; text-align: left;
h2 { h2 {
max-width: 480px; max-width: 460px;
vertical-align: middle; vertical-align: middle;
} }
} }
...@@ -161,14 +161,23 @@ p { ...@@ -161,14 +161,23 @@ p {
margin-right: 20px; margin-right: 20px;
} }
@media #{$small} { @media #{$medium-and-smaller} {
flex-direction: column; flex-direction: column;
} }
@media #{$medium} {
max-width: 460px;
}
} }
.message-from-team { .message-from-team {
max-width: 620px; max-width: 620px;
@media #{$medium} {
max-width: 460px;
}
@media #{$small} { @media #{$small} {
max-width: 300px; max-width: 300px;
} }
...@@ -178,6 +187,11 @@ p { ...@@ -178,6 +187,11 @@ p {
margin: 8px 24px 8px 0px; margin: 8px 24px 8px 0px;
vertical-align: middle; vertical-align: middle;
@media #{$medium} {
max-width: 460px;
margin-right: 0px;
}
@media #{$small} { @media #{$small} {
max-width: 300px; max-width: 300px;
margin-right: 0px; margin-right: 0px;
...@@ -838,16 +852,36 @@ p { ...@@ -838,16 +852,36 @@ p {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 2.5rem; line-height: 2.5rem;
} }
@media #{$medium} {
max-width: 460px;
}
@media #{$small} {
max-width: 300px;
}
} }
} }
.initiatives-subsection-content { .initiatives-subsection-content {
.inner { .inner {
max-width: 1032px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 72px;
@media #{$big} {
max-width: 1032px;
padding: 72px;
}
@media #{$medium} {
max-width: 460px;
}
@media #{$small} {
max-width: 300px;
padding-top: 32px;
}
&.abhi { &.abhi {
padding-top: 0; padding-top: 0;
...@@ -855,29 +889,29 @@ p { ...@@ -855,29 +889,29 @@ p {
} }
&.schools { &.schools {
max-width: 620px;
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
padding-top: 10px;
padding-bottom: 0px; padding-bottom: 0px;
.subsection-tag { .subsection-tag {
background-color: $ui-purple; background-color: $ui-purple;
} }
}
&.family-nights {
max-width: 620px;
align-items: flex-start;
padding-top: 0px; @media #{$big} {
padding-bottom: 0px; max-width: 620px;
}
text-align: left; @media #{$small} {
align-items: center;
h2 {
line-height: 2.5rem;
}
}
} }
&.four-pictures-container { &.four-pictures-container {
max-width: 1080px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 0px; margin-bottom: 0px;
padding-bottom: 0px; padding-bottom: 0px;
...@@ -951,6 +985,20 @@ p { ...@@ -951,6 +985,20 @@ p {
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
@media #{$medium} {
width: 460px;
}
@media #{$small} {
max-width: 300px;
align-items: center;
h2 {
line-height: 2.5rem;
}
}
.subsection-tag { .subsection-tag {
background-color: $ui-purple; background-color: $ui-purple;
margin-bottom: 24px; margin-bottom: 24px;
...@@ -965,48 +1013,28 @@ p { ...@@ -965,48 +1013,28 @@ p {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
text-align: left;
@media #{$medium-and-smaller} {
flex-direction: column;
align-items: center;
}
p { p {
width: 380px; width: 380px;
margin-top: 0px; margin-top: 0px;
margin-right: 20px; margin-right: 20px;
}
@media #{$medium-and-smaller} {
flex-direction: column;
}
.conferences-hero-and-caption {
display: flex;
flex-direction: column;
align-items: center;
width: 540px;
margin-bottom: 24px;
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
margin: 0px 0px 20px 0px;
}
@media #{$medium} {
width: 460px; width: 460px;
} }
@media #{$small} { @media #{$small} {
width: 80%; width: 300px;
overflow: hidden;
margin: 0px;
padding: 0px;
}
img {
margin-bottom: 22px;
@media #{$small} {
align-items: flex-start;
}
}
span {
font-size: 0.875rem;
line-height: 1.25rem;
} }
} }
} }
...@@ -1015,6 +1043,14 @@ p { ...@@ -1015,6 +1043,14 @@ p {
align-self: center; align-self: center;
max-width: 780px; max-width: 780px;
@media #{$medium} {
width: 460px;
}
@media #{$small} {
width: 300px;
}
.schools-conferences-region { .schools-conferences-region {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -1024,6 +1060,7 @@ p { ...@@ -1024,6 +1060,7 @@ p {
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
flex-direction: column; flex-direction: column;
align-items: center;
} }
.conference-image-and-caption { .conference-image-and-caption {
...@@ -1039,7 +1076,13 @@ p { ...@@ -1039,7 +1076,13 @@ p {
.conference-title-and-description { .conference-title-and-description {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
width: 460px; width: 460px;
@media #{$small} {
width: 300px;
}
} }
.left { .left {
...@@ -1050,10 +1093,44 @@ p { ...@@ -1050,10 +1093,44 @@ p {
} }
} }
.conferences-hero-and-caption {
display: flex;
flex-direction: column;
align-items: center;
max-width: 540px;
margin-bottom: 24px;
img {
margin-bottom: 22px;
@media #{$medium-and-smaller} {
width: 460px;
}
}
span {
font-size: 0.875rem;
line-height: 1.25rem;
}
.conferences-hero {
background-image: url('/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png');
overflow: hidden;
background-position: center center;
height: 320px;
width: 100%;
}
}
.teacher-quote { .teacher-quote {
width: 620px; width: 620px;
text-align: left; text-align: left;
@media #{$medium} {
width: 460px;
padding: 0px;
}
@media #{$small} { @media #{$small} {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
...@@ -1453,9 +1530,18 @@ p { ...@@ -1453,9 +1530,18 @@ p {
} }
.initiatives-community { .initiatives-community {
.hero { .community-hero-img {
width: 100%; width: 100%;
margin: 52px 0; margin: 52px 0;
background-image: url("/images/annual-report/initiatives/community-hero.png");
background-size: cover;
background-position: center center;
overflow: hidden;
@media #{$small} {
height: 244px;
}
} }
.moderation-and-guidelines { .moderation-and-guidelines {
...@@ -1575,6 +1661,12 @@ p { ...@@ -1575,6 +1661,12 @@ p {
max-width: 380px; max-width: 380px;
font-size: .875rem; font-size: .875rem;
text-align: center; text-align: center;
@media #{$small} {
img {
width: 300px;
}
}
} }
.blm-projects { .blm-projects {
...@@ -2219,7 +2311,10 @@ p { ...@@ -2219,7 +2311,10 @@ p {
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
margin-left: 0px; margin-left: 0px;
text-align: center; text-align: center;
width: 75%; }
@media #{$small} {
width: 300px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment