Make padding-bottom consistent for pages with EmailSignup component #247

Merged
j285he merged 8 commits from jared-fix-padding-bottom-101 into main 1 year ago
  1. 4
      pages/about/index.module.css
  2. 8
      pages/about/our-supporters.module.css
  3. 4
      pages/about/our-supporters.tsx
  4. 6
      pages/get-involved.module.css
  5. 4
      pages/index.module.css

@ -34,6 +34,10 @@
}
@media only screen and (max-width: calc(768rem / 16)) {
.page {
margin-bottom: calc(30rem / 16);
}
.titleContainer {
display: flex;
flex-direction: column;

@ -1,3 +1,7 @@
.page {
margin-bottom: calc(60rem / 16);
}
.headerContainer {
display: flex;
flex-direction: row;
@ -18,6 +22,10 @@
}
@media only screen and (max-width: calc(768rem / 16)) {
.page {
margin-bottom: calc(30rem / 16);
}
.headerContainer {
flex-direction: column-reverse;
align-items: center;

@ -9,7 +9,7 @@ import styles from "./our-supporters.module.css";
export default function OurSupporters() {
return (
<>
<div className={styles.page}>
<Title>Our Supporters</Title>
<div className={styles.headerContainer}>
<h1 className={styles.header}>Our Supporters</h1>
@ -18,6 +18,6 @@ export default function OurSupporters() {
<div className={styles.content}>
<Content />
</div>
</>
</div>
);
}

@ -1,5 +1,5 @@
.page {
margin: calc(50rem / 16) 0;
margin: calc(60rem / 16) 0;
Review

This is changing the margins on the side as well, which make the page super narrow.

This is changing the margins on the side as well, which make the page super narrow.
}
.page > header {
@ -51,6 +51,10 @@
}
@media only screen and (max-width: calc(768rem / 16)) {
.page {
margin: calc(30rem / 16);
Review

Continuing from Adi's comment: this should be margin: calc(30rem / 16) 0 so we don't change the side margins.

Continuing from Adi's comment: this should be `margin: calc(30rem / 16) 0` so we don't change the side margins.
}
.page > header {
display: flex;
flex-direction: column-reverse;

@ -1,5 +1,5 @@
.page {
padding-bottom: calc(60rem / 16);
margin-bottom: calc(60rem / 16);
}
.intro {
@ -126,7 +126,7 @@
@media only screen and (max-width: calc(768rem / 16)) {
.page {
padding-bottom: calc(30rem / 16);
margin-bottom: calc(30rem / 16);
}
.intro {

Loading…
Cancel
Save