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> <html>
<head> <head>
{% include head.html %}
<link href="css/about.css" rel="stylesheet" /> <link href="css/about.css" rel="stylesheet" />
{% include head.html %}
<title>About - TJSGA</title> <title>About - TJSGA</title>
</head> </head>

View File

@ -25,8 +25,10 @@
.excomm-image, .excomm-image,
.senators-image, .senators-image,
.sponsors-image { .sponsors-image {
width: 12vw; width: 17vw;
height: 12vw; max-width: 200px;
height: 17vw;
max-height: 200px;
margin-bottom: 1vh; margin-bottom: 1vh;
} }
@ -73,8 +75,8 @@
.sponsors-intro { .sponsors-intro {
text-align: center; text-align: center;
margin: 1.5vw; margin: 1.5vw;
/*flex-basis: calc(25% - 4vw);*/ width: 17vw;
max-width: 12vw; max-width: 200px;
flex-wrap: wrap; 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) { @media screen and (max-width: 1150px) {
#dome:after { #dome:after {
background-position-y: 1vh; background-position-y: 1vh;
@ -97,12 +64,19 @@
} }
.officers-intro, .officers-intro,
.excomm-intro, .excomm-intro,
.senator-intro, .senators-intro,
.sponsor-intro { .sponsors-intro {
flex-basis: calc(50% - 4vw); width: 22vw;
max-width: 200px;
}
.officers-image,
.excomm-image,
.senators-image,
.sponsors-image {
width: 22vw;
height: 22vw;
} }
#intro-image { #intro-image {
margin: 0 2vw;
} }
#intro-image > img { #intro-image > img {
margin-top: 1.2em; 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) { @media screen and (min-width: 1150px) {
#intro-text, #intro-text,
#intro-image, #intro-image,
@ -145,11 +160,8 @@
font-size: 1.3em; font-size: 1.3em;
} }
#dome:after { #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) { @media screen and (min-width: 1800px) {