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

Merged
j285he merged 8 commits from jared-fix-padding-bottom-101 into main 2021-09-02 17:35:43 -04:00
5 changed files with 21 additions and 5 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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>
);
}

View File

@ -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;

View File

@ -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 {