Overflow issues in small devices

crisner commented 4 years ago

Please describe the problem (or idea)

What happened just before the problem occurred? Or what problem could this idea solve?

White space on the right causing the menu bar to go off-screen in mobile devices. The issue is caused by a link that was breaking out of an element in both the stories and the blog page and an iframe element in the blog page.

What did you expect to see that you didn't?

I expected to see a page that fit the screen.

Solution: Adding overflow-wrap: break-word; to the body element or the container class and max-width: 100%; to the iframe element in the stylesheet shared by these pages in media queries will solve the issue.

Before:

After:

Please show us where to look

https://publiclab.org/wiki/stories https://publiclab.org/blog

What's your PublicLab.org username?

This can help us diagnose the issue:

christie_reni

Browser, version, and operating system

Many bugs are related to these -- please help us track it down and reproduce what you're seeing!

chrome, android

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

crisner commented 4 years ago

@cesswairimu Please review this bug. This could be a first-timers-only issue. Because the stories page did not have its own stylesheet I wasn't sure if it was okay to add the CSS to the common stylesheet(assuming it is style.css) I created the issue as a bug instead. I can proceed to edit this issue according to your feedback. Thank you.

snpd25 commented 4 years ago

@crisner Can I work on this issue?

cesswairimu commented 4 years ago

Hey @snpd25, you could confirm if this is still happening...I think we solved it on another issue but kindly check. If its still an issue you can go ahead. Thanks

snpd25 commented 4 years ago

@cesswairimu , @crisner , Still the horizontal scroll is required, i.e, the link-text does not break to fit the page. So shall I add overflow-wrap: break-word; to pl-content class in style.css file ?

jywarren commented 3 years ago

Sorry about the stalebot message here, it was a mistake! 😅

amarachi-nwokocha commented 3 years ago

please can i work on this @jywarren and @cesswairimu ??

amarachi-nwokocha commented 3 years ago

and where can ifind the codes for this page the console is quite confusing

cesswairimu commented 3 years ago

Go ahead @amarachi-nwokocha. Thanks

jywarren commented 3 years ago

Hi @amarachi-nwokocha i want to say i think it happens in this content div:

https://github.com/publiclab/plots2/blob/e03f05e8a7f9d14674d5e1cf179ff376a4efaba6/app/views/wiki/show.html.erb#L37-L43

The styles for it should be in:

https://github.com/publiclab/plots2/blob/main/app/assets/stylesheets/style.css#L47

I hope that helps!! Thank you!

amarachi-nwokocha commented 3 years ago

Hi cess i have made the changes here is my pull request https://github.com/publiclab/plots2/pull/8695 please review it. Thank you .

publiclab / plots2