Skip to content

Donation page: "Join the food revolution" image overlaps Donorbox widget #14013

Description

@ganga-300

Description

On the donate page, the "Join the food revolution!" image overlaps
the Donorbox donation widget above it, obscuring part of the payment UI.

Steps to reproduce

  1. Go to the donate page (e.g. https://world.openfoodfacts.org/donate-to-open-food-facts,
    or local openfoodfacts.localhost)
  2. Scroll to the donation widget on the right
  3. Observe the image below the widget overlapping into it

Expected behavior

The image should sit cleanly below the Donorbox widget with normal spacing.

Actual behavior

The image overlaps into the widget due to a negative top margin.

Screenshot

Image

Root cause (found while investigating)

In html/donate/*.html, the image has an inline style with
margin-top: -15%, which pulls it upward regardless of the actual
widget height. This affects all ~150 language files (same inline style,
just translated alt text).

Proposed fix

Replace the negative margin with a normal positive spacing value
(e.g. margin-top: 1rem). Happy to submit a PR for this.

Metadata

Metadata

Assignees

No one assigned

    Projects

    Status
    To discuss and validate
    Status
    In progress

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions