search

wagtail / wagtail.org

Wagtail’s official marketing website
https://wagtail.org/
66 stars 60 forks source link

Newsletter images should preserve their aspect ratio on mobile #372

Open thibaudcolas opened 1 year ago

thibaudcolas commented 1 year ago

Reported by Ester in Twitter DMs, see for example TWIW #122. Example:

screenshot of TWIW on mobile, with one screenshot looking off

MAYANKpandey14 commented 1 year ago

Hey @thibaudcolas

MAYANKpandey14 commented 1 year ago

Cause of Bug

I think the cause of this bug is the explicit mentioning of height and width of the img tag. If we remove that the image works fine and maintains the aspect ratio.

image

Also the use of CSS styles and properties are not done in an effective manner.

image

Solution

Simple solution would be to remove the explicit mentioning of height and width in the IMG tag and customize the CSS properties so that IMG works properly across all devices .

Also, I would like to work on this issue.

nicklee commented 1 year ago

this can be fixed by adding height: auto; to .richtext-image