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

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17
• Part 18
• Part 19
• Part 20
• Part 21
• Part 22
• Part 23
• Part 24
• Part 25
• Part 26
• Part 27
• Part 28
• Part 29
• Part 30
• Part 31
• Part 32