Skip to content

Fix displaying on mobile and large desktop #18

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

Jump to bottom
Merged
merged 7 commits into from
Jul 19, 2020
Merged

Fix displaying on mobile and large desktop #18

merged 7 commits into from
Jul 19, 2020

Conversation

Cyroxin
Copy link
Contributor

@Cyroxin Cyroxin commented Jun 29, 2020 •
edited
Loading

@MartinNowak

Heya!

Hopefully this repo is still maintained. This has made displaying pages on different screen sizes work better for me, so I am hoping to add this so that I do not have to write it manually to every html page.

Regards,
Cyroxin

@Cyroxin Cyroxin changed the title Fix displaying on mobile Fix displaying on mobile and large desktop Jun 29, 2020
MartinNowak
MartinNowak reviewed Jun 30, 2020
View reviewed changes
Copy link
Owner

@MartinNowak MartinNowak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here it says, we can just set the width to 600 to get an minimum width.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_width_and_screen_width
Could you try that on a desktop, seems simpler than the js approach.

MartinNowak
MartinNowak reviewed Jun 30, 2020
View reviewed changes
Copy link
Owner

@MartinNowak MartinNowak left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can find the css sources in assets.

public/css/style.min.css
@@ -1,3 +1 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media(min-width:400px){.container{width:85%;padding:0}}@media(min-width:550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74.0%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78.0%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{font-size:1.5em;line-height:1.6;font-weight:400;font-family:"Raleway","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4.0rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3.0rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media(min-width:550px){h1{font-size:5.0rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3.0rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1eaedb}a:hover{color:#0fa0ce}.button,button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus{color:#333;border-color:#888;outline:0}.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary{color:#FFF;background-color:#33c3f0;border-color:#33c3f0}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What changed here? Seems weird to edit the minified css.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a bit clearer on my personal repo commit. These were added:

#main-contents {
    width: 100%;
} 
.prototype {
    max-width: fit-content;
}

Then put into a css minifier.

Cyroxin added 2 commits June 30, 2020 11:16
@Cyroxin
Use css-only solution
f95d8a7
@Cyroxin
Update style.min.css
6cb32a0 
For use with css-only viewport solution
@Cyroxin
Copy link
Contributor Author

Cyroxin commented Jun 30, 2020 •
edited
Loading

Here it says, we can just set the width to 600 to get an minimum width.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag#Viewport_width_and_screen_width
Could you try that on a desktop, seems simpler than the js approach.

I've changed it to a css-only solution. While this doesn't do as well with overflowing, as it has to create a scroll bar for code blocks, it is zoomable, which the script solution wasn't. Another addition was made to the style.min.css:

BEFORE

pre > code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
}

AFTER

pre > code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
    overflow-x: scroll;
}

Regards,
Cyroxin

@Cyroxin
Remove horizontal scrollbars from desktop
1044872 
overflow.x: scroll -> auto
@Cyroxin
Copy link
Contributor Author

Cyroxin commented Jun 30, 2020

I've changed the css to use auto instead of scroll. This seems to work really well for desktop and mobile.

@Cyroxin
Copy link
Contributor Author

Cyroxin commented Jul 19, 2020 •
edited
Loading

This PR is ready @MartinNowak

@MartinNowak MartinNowak merged commit f3ec1cd into MartinNowak:master Jul 19, 2020
@Cyroxin
Copy link
Contributor Author

Cyroxin commented Jul 19, 2020

CI seems borked, not sure why. Seems to complain about precompiled assets.

@Cyroxin
Copy link
Contributor Author

Cyroxin commented Jul 19, 2020 •
edited
Loading

@MartinNowak my guess is that the error is due to the minified css being directly modified instead of the assets css.

@Cyroxin Cyroxin mentioned this pull request Jul 19, 2020
Merged
MartinNowak added a commit that referenced this pull request Jul 21, 2020
@MartinNowak
Merge pull request #19 from Cyroxin/master
8ff5ddd 
Fix #18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MartinNowak MartinNowak MartinNowak left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Cyroxin @MartinNowak