Skip to content
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.

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

[style] break-word on screen max-width: 680px #8

Merged
merged 4 commits into from
Aug 26, 2020

Conversation

sujin-park
Copy link

@sujin-park sujin-park commented Aug 19, 2020

To fix #4412, I added word-break, padding of #main h4.name.

I think this is easy to read on mobile. It makes line breaks appear wherever the text would otherwise overflow like the examples below:
(The example width is 360px.)

AS-IS
스크린샷 2020-08-19 오후 8 22 22

TO-BE
스크린샷 2020-08-19 오후 8 41 32

@@ -661,6 +661,11 @@ html[data-search-mode] .level-hide {
margin: 1em 0;
}

#main h4.name {
padding: .75em 10px .75em 10px;

Choose a reason for hiding this comment

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

Instead this, how about we put padding-right: 10px in global rule. I cannot see any reason we should put 0px for right padding in wide screen.

Copy link
Author

Choose a reason for hiding this comment

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

Actually, I couldn't see any history too.
I fixed your feedback. I added padding-right: 10px in global rule and removed padding in media-query.
Thanks for your comment.

@boneskull
Copy link

Thanks! This is probably fine, but we should probably configure netlify to build PRs here against the mochajs.org branch on the main repo... ugh

@boneskull
Copy link

should rebase this onto master when #9 is merged

@boneskull
Copy link

OK, you can now see a preview of this change here

Copy link

@boneskull boneskull left a comment

Choose a reason for hiding this comment

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

LGTM, thank you!

@boneskull boneskull merged commit 8facf07 into mochajs:master Aug 26, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

some text looks link hidden text when the device width is less than 680px.
3 participants