Skip to content

GitLab

S
scratch-www
Commit 9a5560bd authored by Karishma Chadha's avatar Karishma Chadha
Browse files
Options

Don't show scratch-jr-transition images on small screens. Fix lint issue.

parent a8058aa0
Hide whitespace changes
Inline Side-by-side
Showing with 19 additions and 14 deletions
src/views/annual-report/annual-report.jsx
View file @ 9a5560bd
...@@ -860,9 +860,11 @@ class AnnualReport extends React.Component { ...@@ -860,9 +860,11 @@ class AnnualReport extends React.Component {
<img src="/images/annual-report/reach/translated-illustration.svg" /> <img src="/images/annual-report/reach/translated-illustration.svg" />
</div> </div>
</div> </div>
<div className="scratch-jr-transition-img"> <MediaQuery minWidth={frameless.mobile}>
<img src="/images/annual-report/reach/horizontal-command.svg" /> <div className="scratch-jr-transition-img">
</div> <img src="/images/annual-report/reach/horizontal-command.svg" />
</div>
</MediaQuery>
</div> </div>
<div className="reach-scratch-jr"> <div className="reach-scratch-jr">
<div className="inner"> <div className="inner">
...@@ -888,9 +890,11 @@ class AnnualReport extends React.Component { ...@@ -888,9 +890,11 @@ class AnnualReport extends React.Component {
</h4> </h4>
</div> </div>
</div> </div>
<div className="scratch-jr-transition-img"> <MediaQuery minWidth={frameless.mobile}>
<img src="/images/annual-report/reach/horizontal-loop.svg" /> <div className="scratch-jr-transition-img">
</div> <img src="/images/annual-report/reach/horizontal-loop.svg" />
</div>
</MediaQuery>
</div> </div>
<div <div
className="initiatives-section" className="initiatives-section"
...@@ -1891,7 +1895,7 @@ class AnnualReport extends React.Component { ...@@ -1891,7 +1895,7 @@ class AnnualReport extends React.Component {
<div className="conference-image-and-caption left"> <div className="conference-image-and-caption left">
{/* eslint-disable-next-line max-len */} {/* eslint-disable-next-line max-len */}
<img src="/images/annual-report/initiatives/schools/Conferences Story/Africa Conference.png" /> <img src="/images/annual-report/initiatives/schools/Conferences Story/Africa Conference.png" />
<span className="photo-credit"> <span className="photo-credit">
<FormattedMessage <FormattedMessage
id="annualReport.conferencesAfricaImageCaption" id="annualReport.conferencesAfricaImageCaption"
values={{ values={{
......
src/views/annual-report/annual-report.scss
View file @ 9a5560bd
...@@ -741,6 +741,10 @@ p { ...@@ -741,6 +741,10 @@ p {
img { img {
max-width: 380px; max-width: 380px;
} }
@media #{$small} {
margin-bottom: 64px;
}
} }
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
...@@ -801,9 +805,6 @@ p { ...@@ -801,9 +805,6 @@ p {
@media #{$medium} { @media #{$medium} {
margin-left: 32px; margin-left: 32px;
} }
@media #{$small} {
margin-left: -8px;
}
} }
} }
...@@ -817,10 +818,6 @@ p { ...@@ -817,10 +818,6 @@ p {
@media #{$medium} { @media #{$medium} {
margin-right: 12px; margin-right: 12px;
} }
@media #{$small} {
margin-right: -36px;
overflow: hidden;
}
} }
} }
...@@ -869,6 +866,10 @@ p { ...@@ -869,6 +866,10 @@ p {
width: 100%; width: 100%;
} }
} }
@media #{$small} {
padding: 84px 0 52px 0;
}
} }
.initiatives-section { .initiatives-section {
......
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