freeCodeCamp / meeting-for-good

A meeting coordination app for your team
https://meeting.freecodecamp.org
BSD 3-Clause "New" or "Revised" License
338 stars 113 forks source link

Change width to max-width to not stretch images #465

Closed staadecker closed 6 years ago

staadecker commented 6 years ago

This PR is for the issue 464.

The images on the home page we're blurry and deformed. The following CSS was being applied to the images.

.main img { max-height: 80vh; width: 50vw; margin: 10px; }

The width property would expand the images above their resolution on large displays. Then the max-height property would deform the image.

Changing width to max-width makes sure the images aren't expanded but keeps the same formatting the same as before for smaller displays.

closes #464