Brief

How can we redesign photo elements to be more responsive at middle breakpoints?

Solution

Redesign the image elements to scale separately from the height of its parent element by implementing a card design.

Process

The program page had images that scaled to the height of the text element. These included a piece onthe faculty and a pece of content about the potential career opportunities. As the website grew the content for these elements got longer and more complex. This caused the images to deform at middle width breakpoints where the content was at it's longest. Although a solution might have been to go through the site and shorten some of this content, the fact of the matter was that there were hundreds of pages where this was happening, and the effort it would have taken to re-write this content was a much bigger lift than just having me redesign these components to better fit their text content. After a few rounds of redesigns, I decided that simplifying and re-arranging the visual elements was the best course of action because it would limit the SCSS bloat that the website was starting to experience and because itwould mean that the new design would be better suited to the current content.

Images