Skip to content

Remove img-fluid class from AddressMap template for better responsive control #73

Description

@jsirish

Issue Description

The AddressMap.ss template currently includes the Bootstrap img-fluid class on the map image, which applies max-width: 100% and constrains map images from displaying at their natural size.

Current Implementation

<img src="..." alt="..." class="img-fluid" />

Proposed Solution

Remove the img-fluid class to allow developers more control over map sizing:

<img src="..." alt="..." />

Benefits

  1. Natural Size Display: Maps can display at their actual Google Static Maps API resolution
  2. Better Responsive Control: Developers can implement custom responsive behavior via CSS
  3. Improved Map Quality: Higher resolution maps aren't artificially constrained
  4. Theme Flexibility: Child themes can implement their own sizing strategies without overriding Bootstrap classes

Use Case

In our current project, we needed maps to fill vertical space dynamically while maintaining natural resolution. The img-fluid class prevented this by constraining the image width, requiring us to override it with !important declarations.

Backward Compatibility

This is a minor breaking change, but developers who rely on the responsive behavior can easily add img-fluid or custom CSS to their templates.

Implementation

The change should be made in the AddressMap.ss template file, removing the class="img-fluid" attribute from the <img> tag.

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions