remove hard coded image dimensions and add a class that sets max-width: 100%
was causing the images to overlap the width of the screen at small screen sizes, causing a horizontal scroll bar and a broken layout
only adding the class or only removing the width/height don't fix the problem, because width/height as inline attributes override CSS
was hoping to be able to leave the width/height to reduce cumulative layout shift when loading, but this is a small loss compared to fixing the general appearance
surprised we don't have a general class to have all img tags with max-width: 100% but since there isn't one I don't want to try introducing one here as proving it's fine on every page is a much bigger task (although logically it should be... right?)
⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️
What / why
max-width: 100%imgtags withmax-width: 100%but since there isn't one I don't want to try introducing one here as proving it's fine on every page is a much bigger task (although logically it should be... right?)Page with the problem: https://www.gov.uk/government/how-government-works
(I've checked for other image tags within
government-frontendand this seems to be the only instance of this problem)Example of the problem:
Visual changes
Trello card: https://trello.com/c/USYdcgFe/235-image-off-the-right-hand-side-of-the-screen