wagtail.org icon indicating copy to clipboard operation
wagtail.org copied to clipboard

Newsletter images should preserve their aspect ratio on mobile

Open thibaudcolas opened this issue 1 year ago • 3 comments

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

screenshot of TWIW on mobile, with one screenshot looking off

thibaudcolas avatar Mar 30 '23 10:03 thibaudcolas

Hey @thibaudcolas

MAYANKpandey14 avatar Jun 07 '23 05:06 MAYANKpandey14

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.

MAYANKpandey14 avatar Jun 07 '23 05:06 MAYANKpandey14

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

nicklee avatar Aug 03 '23 09:08 nicklee