8000 Improve responsive design on mobile devices by lin-lu · Pull Request #428 · vuejs/v2.vuejs.org · GitHub
[go: up one dir, main page]
Skip to content

Improve responsive design on mobile devices #428

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 3 commits into from
Oct 2, 2016
Merged

Improve responsive design on mobile devices #428

merged 3 commits into from
Oct 2, 2016

Conversation

lin-lu
Copy link
Contributor
@lin-lu lin-lu commented Oct 1, 2016

No description provided.

@chrisvfritz
Copy link
Contributor

@lin-lu Can you please describe (and possibly print screenshots of) the problem you're seeing that you're trying to fix?

@lin-lu
Copy link
Contributor Author
lin-lu commented Oct 1, 2016

The first problem is that when the screen width is between 720px and 900px, the hamburger menu button on the home page does not work. You can reproduce this bug by resizing the browser.

The second problem is that the search text box is displayed on top of the vue logo, when the width is around 800px.
screen shot 2016-10-01 at 17 37 25
I changed the breakpoint of the media queries from 720px to 900px, so the mobile version will be displayed when the width is smaller than 900px.

After I changed that, I noticed that the max-width of the content is fixed at 600px, so when the screen width is larger than that and smaller than 900px, the content will appear on the left side of the page, leaving some empty space on the right side.
screen shot 2016-10-01 at 17 57 12
To make it symmetry, I also centered the content for mobile devices.

@chrisvfritz
Copy link
Contributor

Thanks! This looks good. 👍

@chrisvfritz chrisvfritz merged commit 8ed1355 into vuejs:master Oct 2, 2016
dingyiming added a commit to volksbright/document-standard-vue that referenced this pull request Oct 2, 2016
@dingyiming
Merge branch 'master' into 2.0-cn
5ec09e7 
* master:
  Improve responsive design on mobile devices (vuejs#428)
  Fix typo in Server-Side Rendering guide (vuejs#434)
  Small refactor of count + knife > 1 knife (vuejs#433)
  Update unit-testing.md (vuejs#430)
  Fix a broken loader url (vuejs#429)
  make component examples clearer in guide index
  remove number for example in guide index
  2.0.1
  update cdn link
  fix npm main export instructions
  2.0
  fix example links
  update commits example url

# Conflicts:
#	src/guide/index.md
#	src/guide/ssr.md
#	themes/vue/_config.yml
kazupon pushed a commit to kazupon/vuejs.org that referenced this pull request Oct 2, 2016
@lin-lu @kazupon
Improve responsive design on mobile devices (vuejs#428)
7bd44b5 
* Fix menu button on tablets

* Hide menu, collapse header on tablets

* Center content on mobile devices
Peter-WF pushed a commit to Peter-WF/vuefe.github.io that referenced this pull request Nov 18, 2016
@lin-lu @chrisvfritz
Improve responsive design on mobile devices (vuejs#428)
768482f 
* Fix menu button on tablets

* Hide menu, collapse header on tablets

* Center content on mobile devices
Peter-WF pushed a commit to Peter-WF/vuefe.github.io that referenced this pull request Nov 18, 2016
@dingyiming
Merge branch 'master' into 2.0-cn
03f7687 
* master:
  Improve responsive design on mobile devices (vuejs#428)
  Fix typo in Server-Side Rendering guide (vuejs#434)
  Small refactor of count + knife > 1 knife (vuejs#433)
  Update unit-testing.md (vuejs#430)
  Fix a broken loader url (vuejs#429)
  make component examples clearer in guide index
  remove number for example in guide index
  2.0.1
  update cdn link
  fix npm main export instructions
  2.0
  fix example links
  update commits example url

# Conflicts:
#	src/guide/index.md
#	src/guide/ssr.md
#	themes/vue/_config.yml
kazupon pushed a commit to kazupon/vuejs.org that referenced this pull request Nov 24, 2017
@potato4d @kazupon
update sponsor link (vuejs#428)
82f549e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
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
@lin-lu @chrisvfritz
0