Skip to content

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

@jsirish

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.

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