Skip to content

Issue with Image Overlapping on Processing.org Examples Page #514

Description

@Lavanyaa09

Increasing access

Addressing the issue of image overlap on the Examples page of the Processing.org website contributes to enhancing the overall user experience. By ensuring that images do not obstruct or overlap with each other while scrolling, users can more easily navigate through the page's content. This improvement promotes a smoother browsing experience, making it easier for users to discover and engage with the various examples and resources available on the platform.

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)

Feature enhancement details

I hope this message finds you well. I wanted to bring to your attention an issue I encountered while browsing the Examples page on the Processing.org website.

Upon visiting the page, I noticed an image situated at the top right corner, intended for contributions and donations. While the page content scrolls, this particular image remains static, causing it to overlap with other images and elements as I navigate down the page.

Given the prominence of this page as a showcase of Processing examples and resources, ensuring a seamless and unobstructed browsing experience is paramount. Therefore, addressing this issue of image overlap would contribute to enhancing user engagement and satisfaction with the platform.

I believe resolving this matter would significantly improve the overall user experience and maintain the professionalism associated with the Processing.org website.

Thank you for your attention to this matter. I am available to provide further help if needed.
@limzykenneth
Examplesp5.pdf

Activity

  1. welcome commented on Feb 11, 2024

    @welcome

    Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

  2. praveen-rikhari commented on Feb 16, 2024

    @praveen-rikhari

    @Lavanyaa09 Hey, Can you please share any approach on this, how can we implement that, maybe we could come up with a better solution.Though, I have one approach for this:

    • we can remove the static/fixed nature of the image
      What's your views on this? Kindly share.
  3. SableRaf commented on Jul 16, 2024

    @SableRaf
    Collaborator

    Hi @Lavanyaa09 and @praveen-rikhari,

    Thank you for your feedback and my apologies for the delayed response.

    The Call to Action (CTA) at the top right is designed to stay visible to encourage donations, which are essential for supporting the platform.

    To make it less disruptive, we could use 4 columns instead of 5 at the largest width on the examples page, leaving space on the right. At smaller responsive breakpoints, I suggest keeping it as is, like a floating action button in the bottom right.

    Feel free to submit a Pull Request to implement this change.

  4. Lavanyaa09 commented on Jul 16, 2024

    @Lavanyaa09
    Author

    Hello @SableRaf,

    Thank you for your feedback on the above issue.

    I appreciate the suggestion regarding the Call to Action (CTA) and agree that optimizing its placement could enhance user experience while maintaining its visibility. I propose implementing a 4-column layout instead of 5 at the largest width on the examples page, leaving space on the right for the CTA. For smaller responsive breakpoints, we can keep the CTA as a floating action button in the bottom right corner to ensure it remains accessible without being disruptive.

    I am interested in working on this issue further and will submit a Pull Request to implement this change.

    Thank you.

  5. praveen-rikhari commented on Jul 16, 2024

    @praveen-rikhari

    Hi @SableRaf,

    Thank you for your response. I believe @Lavanyaa09 will be making a pull request and should be able to assist you. However, if you need any further help, I am available to support as well.

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions