diff --git a/src/components/LayoutSingleColumn/LayoutSingleColumn.css b/src/components/LayoutSingleColumn/LayoutSingleColumn.css index e012129e..f936640e 100644 --- a/src/components/LayoutSingleColumn/LayoutSingleColumn.css +++ b/src/components/LayoutSingleColumn/LayoutSingleColumn.css @@ -13,7 +13,4 @@ /* Expand to the full remaining width of the viewport */ display: flex; flex-direction: column; - width: calc(100% - 72px); - max-width: 1056px; - margin: 88px auto; } diff --git a/src/containers/AboutPage/AboutPage.css b/src/containers/AboutPage/AboutPage.css index 83faf00f..62cc35d4 100644 --- a/src/containers/AboutPage/AboutPage.css +++ b/src/containers/AboutPage/AboutPage.css @@ -5,7 +5,16 @@ .pageTitle { text-align: center; +} +.staticPageWrapper { + width: calc(100% - 48px); + max-width: 1056px; + margin: 72px auto; + + @media (--viewportMedium) { + width: calc(100% - 72px); + } } .coverImage { @@ -18,15 +27,28 @@ .contentWrapper { display: flex; + flex-wrap: wrap; + + @media (--viewportMedium) { + flex-wrap: nowrap; + } + } .contentSide { - width: 193px; - margin-right: 103px; - margin-top: 8px; + font-style: italic; + + @media (--viewportMedium) { + width: 193px; + margin-right: 103px; + margin-top: 8px; + } } .contentMain { - max-width: 650px; width: 90%; + + @media (--viewportMedium) { + max-width: 650px; + } } \ No newline at end of file diff --git a/src/containers/AboutPage/AboutPage.js b/src/containers/AboutPage/AboutPage.js index 46093adc..9aaa0927 100644 --- a/src/containers/AboutPage/AboutPage.js +++ b/src/containers/AboutPage/AboutPage.js @@ -32,7 +32,7 @@ const AboutPage = () => { - +

It’s about Saunatime.

My first ice cream.