finishing up (?) supporters responsiveness

src/views/annual-report/annual-report.jsx

@@ -688,22 +688,22 @@ class AnnualReport extends React.Component {
                                     <FormattedMessage id="annualReport.supportersSFEDescription3" />
                                 </p>
                             </div>
-                            <div className="david-siegel">
-                                <div className="ds-info">
-                                    <img src="/images/annual-report/david-siegel-photo.svg" />
-                                    <div className="ds-text">
-                                        <h4>David Siegel</h4>
-                                        <FormattedMessage id="annualReport.supportersCoFounder" />
-                                        <br />Two Sigma
-                                    </div>
-                                </div>
-                                <div className="ds-quote">
-                                    {/* eslint-disable-next-line */}
-                                    <Comment comment={this.props.intl.formatMessage({id: 'annualReport.supportersQuote'})} />
+                        </div>
+                        <div className="david-siegel">
+                            <div className="ds-info">
+                                <img src="/images/annual-report/david-siegel-photo.svg" />
+                                <div className="ds-text">
+                                    <h4>David Siegel</h4>
+                                    <FormattedMessage id="annualReport.supportersCoFounder" />
+                                    <br />Two Sigma
                                 </div>
                             </div>
+                            <div className="ds-quote">
+                                {/* eslint-disable-next-line */}
+                                <Comment comment={this.props.intl.formatMessage({id: 'annualReport.supportersQuote'})} />
+                            </div>
                         </div>
-                        <div className="supporters-subsection">
+                        <div className="supporters-subsection supporters-lists">
                             <div className="supporters-blurb">
                                 <h4>
                                     <FormattedHTMLMessage id="annualReport.supportersThankYou" />
@@ -914,7 +914,7 @@ class AnnualReport extends React.Component {
                                 </div>
                             </div>
                         </div>
-                        <div className="supporters-subsection">
+                        <div className="supporters-subsection supporters-lists">
                             <div className="supporters-level">
                                 <h3>
                                     <FormattedHTMLMessage id="annualReport.supportersInKindTitle" />

src/views/annual-report/annual-report.scss

@@ -477,6 +477,13 @@ p {
 
     .inner {
         max-width: 780px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .subsection-tag {
+        align-self: flex-start;
     }
 
     h3, h4 {
@@ -514,7 +521,8 @@ p {
         align-items: center;
 
         text-align: left;
-        margin: 48px 80px 0px 80px;
+        margin-top: 48px;
+        width: 620px;
 
         h2 {
             font-size: 1.5rem;
@@ -533,9 +541,7 @@ p {
         display: flex;
         align-items: flex-start;
 
-        width: 780px;
-        margin-bottom: 52px;
-        margin-top: 32px;
+        margin: 32px 0px 52px 0px;
 
         .ds-info {
             display: flex;
@@ -554,7 +560,8 @@ p {
     .comment-text {
         background-color: $ui-white;
         text-align: left;
-        margin: 20px;
+        //margin: 20px;
+        padding: 20px;
 
         p {
             font-size: 1.25rem;
@@ -573,11 +580,11 @@ p {
 
         .supporters-list-side {
             margin: 0 1.25rem 0 0;
+            width: 300px;
 
             li {
                 margin: 0 0 .75rem 0;
                 padding: 0 auto;
-                width: 300px;
                 overflow: wrap;
             }
         }
@@ -596,8 +603,18 @@ p {
             max-width: 620px;
         }
 
+        .subsection-tag {
+            align-self: center;
+        }
+
         .supporters-subsection {
             text-align: left;
+
+            width: 460px;
+
+            &.supporters-lists {
+                width: 100%;
+            }
         }
 
         .david-siegel {
@@ -608,6 +625,7 @@ p {
             width: 460px;
             flex-direction: row;
             text-align: left;
+            margin-bottom: 20px;
 
             img {
                 margin-right: 20px;
@@ -625,6 +643,32 @@ p {
             margin: 0;
         }
 
+        .supporters-heading {
+            margin-bottom: 28px;
+        }
+
+        .subsection-tag {
+            margin-bottom: 48px;
+        }
+
+        .supporters-list-side {
+            width: 220px;
+        }
+
+        .ds-info {
+            width: 100%;
+        }
+    }
+
+    @media #{$small} {
+        .supporters-subsection {
+            width: 100%
+        }
+
+        .david-siegel {
+            width: 100%;
+        }
+
         .supporters-list {
             flex-direction: column;
             align-content: flex-start;