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

Fix responsive column width in demo page for mobile browser #60

Closed
1 task done
KCarlile opened this issue Jun 13, 2024 · 2 comments
Closed
1 task done

Fix responsive column width in demo page for mobile browser #60

KCarlile opened this issue Jun 13, 2024 · 2 comments
Assignees
Labels
bug Something isn't working

Comments

@KCarlile
Copy link
Owner

KCarlile commented Jun 13, 2024

Background

When viewing the examples page on a mobile device, it's apparent that the 50/50 columns are not working for that narrow display. See the example screenshot below:

image

Steps to Reproduce

View https://demo.kcarlile.com/guitar-diagrams-js/ on a phone's browser or in a browser with the width set to a mobile size.

Acceptance Criteria

  • The examples page is readable with responsive columns on mobile browsers without breaking the experience for fullsize browsers

Approach

  • Using Bootstrap's classes, try changing <div class="col-6">...</div><div class="col-6">...</div> to something like <div class="col-md-6">...</div><div class="col-md-6">...</div>

Notes

@KCarlile KCarlile added the bug Something isn't working label Jun 13, 2024
@KCarlile KCarlile self-assigned this Jun 13, 2024
@KCarlile
Copy link
Owner Author

Using <div class="col-md-6 mb-4">...</div> fixed this.

@KCarlile
Copy link
Owner Author

PR into develop: #61
PR into 10-productize-documentation: #62

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: Done
Development

No branches or pull requests

1 participant