How to Design and Code a Product Landing Page - Part 13

In part 13 of my "How to Design and Code a Product Landing Page" screencast series, you will see some optimizations take place.

In this video, I fall back to the lifestyle section which features a fullwidth photo in the background and content atop it to support the design. I struggle a bit getting the photo to render correctly as well as be adaptable to responsiveness.

The problem I'm having relates to when I scale the browser very wide. I'm on a large monitor and when the site gets stretched to a pretty large width you start to see white space where I'd rather you didn't. To fix this I adjust the image itself to be a basic fullwidth image. To give the slanted effect some depth I add it with CSS to cover the image. In the end, the design looks like it's slanted but in reality, we are achieving the effect via code which is both way more efficient and nicer on the eyes.

In the next video, we continue to the next section which is the eCommerce portion of the site. Follow along and subscribe to the YouTube channel if you haven't already. As each new video of this series and future videos of other series get added you will be notified!

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12