Max Roper
Screenshot of challenge solution

Challenge requirements

Users should be able to:
  • View the optimal layout for the interface depending on their device's screen size

This was a fun challenge to complete after taking a short break from my learning, and it taught me that I need to spend more time on background image usage within CSS.

The actual card component I was able to complete from start-to-finish in just over an hour, but the longest part was attempting to find a responsive solution for the background image positioning without using media queries.

Unfortunately I was not able to find an elegant solution without using px values and media queries on the individual images, so I will ensure that I spend some dedicated time on background positioning to sharpen my skills in this area.