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

Embeds do not scale, causing overflow on mobile #1731

Closed
ryoarmanda opened this issue Jan 20, 2022 · 3 comments · Fixed by #1797
Closed

Embeds do not scale, causing overflow on mobile #1731

ryoarmanda opened this issue Jan 20, 2022 · 3 comments · Fixed by #1797

Comments

@ryoarmanda
Copy link
Contributor

ryoarmanda commented Jan 20, 2022

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.

image

image

@ong6
Copy link
Contributor

ong6 commented Feb 1, 2022

I was looking into investigating this issue but it seems as though my media embed does not overflow but instead causes the whole page to be scaled down.

image

I'm not sure if this is the same issue as what you mentioned but I think a fix could be to force the width to a view-width instead

@ang-zeyu
Copy link
Contributor

ang-zeyu commented Feb 2, 2022

@ong6 you could also try looking into #1741, although it fixes only the header.

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.

I was looking into investigating this issue but it seems as though my media embed does not overflow but instead causes the whole page to be scaled down.

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)

@tlylt
Copy link
Contributor

tlylt commented Feb 23, 2022

@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.
image
If scaled appropriately, the blank spaces should disappear.

I have tested the overflow-x: auto; strategy and it does this issue with embeds but by allowing horizontal scrolling (it works similar to our tables). The proposed scaling of embeds is perhaps worth trying since in our context the embedded content is most likely to be squarish. Hence, they are suitable to fit within the viewport and still remain "readable".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants