fix mobile

This commit is contained in:
William Zhang 2017-10-28 13:35:53 -04:00
parent 51a252e192
commit 6281eeb48a
3 changed files with 60 additions and 46 deletions

View File

@ -6,8 +6,8 @@ orgs: ["officers", "excomm", "senators", "sponsors"]
<html>
<head>
{% include head.html %}
<link href="css/about.css" rel="stylesheet" />
{% include head.html %}
<title>About - TJSGA</title>
</head>

View File

@ -25,8 +25,10 @@
.excomm-image,
.senators-image,
.sponsors-image {
width: 12vw;
height: 12vw;
width: 17vw;
max-width: 200px;
height: 17vw;
max-height: 200px;
margin-bottom: 1vh;
}
@ -73,8 +75,8 @@
.sponsors-intro {
text-align: center;
margin: 1.5vw;
/*flex-basis: calc(25% - 4vw);*/
max-width: 12vw;
width: 17vw;
max-width: 200px;
flex-wrap: wrap;
}

View File

@ -1,36 +1,3 @@
@media screen and (max-width: 500px) {
ul {
margin: 0 10vw;
}
#dome {
display: none;
}
#wrapper {
min-height: calc(100vh - 90px - 2.75em);
}
#wrapper,
footer {
top: 48px;
}
#intro-text {
margin: 0 5vw;
}
.officers-intro,
.excomm-intro,
.senator-intro,
.sponsor-intro {
margin: 7vw;
}
nav#menu {
overflow: hidden;
}
}
@media screen and (max-width: 700px) {
#banner > h1 {
display: none;
}
}
@media screen and (max-width: 1150px) {
#dome:after {
background-position-y: 1vh;
@ -97,12 +64,19 @@
}
.officers-intro,
.excomm-intro,
.senator-intro,
.sponsor-intro {
flex-basis: calc(50% - 4vw);
.senators-intro,
.sponsors-intro {
width: 22vw;
max-width: 200px;
}
.officers-image,
.excomm-image,
.senators-image,
.sponsors-image {
width: 22vw;
height: 22vw;
}
#intro-image {
margin: 0 2vw;
}
#intro-image > img {
margin-top: 1.2em;
@ -129,6 +103,47 @@
}
}
@media screen and (max-width: 700px) {
#banner > h1 {
display: none;
}
.officers-intro,
.excomm-intro,
.senators-intro,
.sponsors-intro {
width: 97vw;
max-width: 200px;
}
.officers-image,
.excomm-image,
.senators-image,
.sponsors-image {
width: 97vw;
height: 97vw;
}
}
@media screen and (max-width: 500px) {
ul {
margin: 0 10vw;
}
#dome {
display: none;
}
#wrapper {
min-height: calc(100vh - 90px - 2.75em);
}
#wrapper,
footer {
top: 48px;
}
#intro-text {
margin: 0 5vw;
}
nav#menu {
overflow: hidden;
}
}
@media screen and (min-width: 1150px) {
#intro-text,
#intro-image,
@ -145,11 +160,8 @@
font-size: 1.3em;
}
#dome:after {
background-position-y: 1vh;
background-position-y: 2.5vh;
}
/*.officers-intro, .excomm-intro, .senator-intro, .sponsor-intro {
flex-basis: calc(35% - 4vw);
}*/
}
@media screen and (min-width: 1800px) {