Skip to content

Fix scaling and responsiveness, Safari bug #1196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Feb 21, 2021
Merged

Fix scaling and responsiveness, Safari bug #1196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2dcb985
Setup structure for post event
peterkos Feb 21, 2021
8b6ddf0
Start of designs
peterkos Feb 21, 2021
dadec96
Gif added
peterkos Feb 21, 2021
284a411
Fix the thing
peterkos Feb 21, 2021
0847ee9
Sizing
peterkos Feb 21, 2021
858d455
last things
peterkos Feb 21, 2021
4b543cb
Fix scaling issues on desktop and safari
peterkos Feb 21, 2021
871f518
Fix a lot of responsive
peterkos Feb 21, 2021
c7dcaae
Merge branch 'develop' into bh-1192
peterkos Feb 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,4 @@ console.log(hiringMessage);
// Comment generated via js instead of directly in HTML so the hiring message text is only in one place
const comment = document.createComment("\n"+hiringMessage.toString()+"\n");
document.insertBefore(comment, document.firstChild);

25 changes: 16 additions & 9 deletions sass/event.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1200,23 +1200,19 @@ footer#end-footer {
#end-main {
display: flex;
flex-direction: row;
// border: 3px solid yellow;
height: calc(100vh - #{$nav-height});
margin: 0 auto;
margin-top: $nav-height / 2;
width: 90%;
bottom: 0;
margin-top: $nav-height;
top: 0;
position: absolute;

#thank-you-container, #ricky-container {
// border: 3px solid yellow;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

#thank-you-container {
width: 40%;
// border: 3px solid yellow;

h1 {
font-size: 4em;
Expand All @@ -1235,8 +1231,14 @@ footer#end-footer {

#ricky-container {
width: 60%;
// border: 3px solid yellow;
overflow: hidden; // Beeg gif
object-fit: scale-down;
height: auto;
display: flex;
align-items: d;

img {
width: 100%;
}
}
}

Expand Down Expand Up @@ -1434,6 +1436,7 @@ footer#end-footer {
}
}
}

#end-main {
flex-direction: column-reverse;
width: 100%;
Expand Down Expand Up @@ -1792,6 +1795,10 @@ footer#end-footer {
justify-content: space-around;
gap: 20px;
}

#end-main #thank-you-container h1 {
font-size: 2em;
}
}

@media screen and (max-width: 650px) {
Expand Down