diff --git a/css/main.css b/css/main.css index 0371e96..64ac698 100644 --- a/css/main.css +++ b/css/main.css @@ -191,33 +191,23 @@ section h2, #intro-text { text-align: center; -} - -#intro-text { - width: calc(50% - 8vw); + flex-grow: calc(50% - 8vw); margin: 0 2vw; } #intro-image { text-align: center; - width: calc(50% - 8vw); - margin: 0 2vw; - padding-top: calc(5% + 2.1em); + flex-grow: calc(50% - 8vw); } #intro-image>img { + margin-top: calc(83px + 2.1em); width: 100%; } -#tweets { +#tweets, #feedback { text-align: center; - width: calc(50% - 8vw); - margin: 0 2vw; -} - -#feedback { - text-align: center; - width: calc(50% - 8vw); + flex-grow: calc(50% - 8vw); margin: 0 2vw; } diff --git a/css/responsive.css b/css/responsive.css index e3995ea..a49a63b 100644 --- a/css/responsive.css +++ b/css/responsive.css @@ -29,7 +29,7 @@ } } -@media screen and (max-width: 1100px) { +@media screen and (max-width: 1150px) { #dome:after { background-position-y: 5vh; background-size: 100%; @@ -90,6 +90,15 @@ .sponsor-intro { flex-basis: calc(50% - 4vw); } + #intro-image { + margin: 0 2vw; + } + #intro-image > img { + margin-top: 1.2em; + } + #tweets, #feedback { + margin: 0 2vw; + } } @media screen and (max-width: 1000px) { @@ -109,8 +118,6 @@ @media screen and (min-width: 1100px) { #intro-text, #intro-image, - #tweets, - #feedback, .list, .links { max-width: 550px; @@ -128,6 +135,14 @@ } @media screen and (min-width: 1800px) { + #intro-text, + #intro-image, + #tweets, + #feedback, + .list, + .links { + width: 100%; + } #letter { font-size: 1.4em; }