-
Notifications
You must be signed in to change notification settings - Fork 133
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
Embeds do not scale, causing overflow on mobile #1731
Comments
@ong6 you could also try looking into #1741, although it fixes only the header.
I'm encountering something closer to @ryoarmanda's description instead. (the default viewport width is nicely lined up with the main text, although the embeds and headers overflow). Try opening a new browser instance to the same link and see if the issue persists. (for me the zoom persisted across refreshes, which may causing your issue) |
@ong6, as mentioned by @ang-zeyu, you may want to set the dimension from 125% to 100%. Anyways, your screenshot actually does show the "overflow" effect. The embed forces the width of the page to increase horizontally just to fit itself. I have tested the |
Tell us about your environment
Windows
MarkBind Version:
v3.1.0
What did you do? Please include the actual source code causing the issue.
From default template (via
markbind init
), serve the site and observe it on mobile dimensions (e.g. through Chrome's device emulation).What did you expect to happen?
Everything is scaled appropriately
What actually happened? Please include the actual, raw output.
Embeds do not scale along, causing horizontal overflow, which is not ideal on mobile environment. The overflow negatively impacts the navbar, pushing the search bar out of the viewport and thus scrolling is required to access it.
This is largely due to the iframes that contain the embedded media have fixed width and height (default is 640x390). Making responsive iframe container is a little finicky, but possible (found in StackOverflow). I think it's good to explore whether this can be done on our end, be it with the default or custom dimensions.
The text was updated successfully, but these errors were encountered: