Let’s Build: A Consultancy Website – Part 33

Making The Homepage Hero Section Responsive

In part 33 I continue working on the home page trying my best to make the hero section responsive. As you can see from the video it’s a pretty tedious and downright painful process when working with a unique layout/design like I have in place.

A big issue came into play trying to make things play nice around the offset hero image. While the image maintained its positioning in the top left corner of the page the right of the content and components need to adapt and degrade around it in what appears to be a smooth way.

I made use of quite a few CSS media queries which I’m never a big fan of. Sometimes a unique approach on design requires a unique and sometimes repetitive approach with code. All in all the responsiveness is at an acceptable state in my opinion. There are a number of enhancements and improvements I could make but I would be spending more time than I’ve allotted to do so. Your mileage may vary on your own projects!

Download the Source Code for this Project

Source Code

The Series So Far