scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-18 18:34:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #2107 from LiFaytheGoblin/responsive-project-page/container-width

Browse source 
Make container smaller for mobile to allow for space left and right
This commit is contained in:
Ray Schamp 2018-10-08 18:13:40 +01:00 committed by GitHub
commit 3f5f224a76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/views/preview/preview.scss
View file

@ -7,11 +7,14 @@ $player-height: 406px;
$stage-width: 480px; $stage-width: 480px;
$small: "screen and (max-width : #{$mobile}-1)"; $small: "screen and (max-width : #{$mobile}-1)";
$medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
$intermediate: "screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)";
$medium-and-small: "screen and (max-width : #{$tablet}-1)"; $medium-and-small: "screen and (max-width : #{$tablet}-1)";
/* override view padding for share banner */ /* override view padding for share banner */
#view { #view {
padding: 0; padding: 0;
width: 100%;
} }
.gui { .gui {
@ -25,6 +28,19 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
.preview { .preview {
.inner {
margin: 0 auto;
@media #{$medium-and-small} {
max-width: 90%;
}
@media #{$intermediate} {
width: 90%;
min-width: 640px;
}
}
.project-title { .project-title {
font-size: 1.75rem; font-size: 1.75rem;
font-weight: 500; font-weight: 500;
@ -59,6 +75,10 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
@media #{$medium-and-small} { @media #{$medium-and-small} {
flex-direction: row; flex-direction: row;
} }
@media #{$small} {
margin-right: 0;
}
} }
img { img {
@ -83,10 +103,6 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
text-align: left; text-align: left;
font-size: .8rem; font-size: .8rem;
flex-grow: 1; flex-grow: 1;
@media #{$medium-and-small} {
min-width: 100%;
}
} }
.validation-message { .validation-message {
@ -229,10 +245,6 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
@media #{$small} { @media #{$small} {
width: 100%; width: 100%;
.stage-wrapper {
max-width: 100%;
}
} }
} }