Let's Build: A Consultancy Website - Part 33 - Making The Homepage Hero Section Responsive

Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com🤘🏻

======

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: https://github.com/justalever/endlyssdesigns

💻 Previously published at: https://web-crunch.com/lets-build-consultancy-website-part-33/

💻 Check out the blog: https://web-crunch.com

💡 👫 Check out my agency: https://coupleofcreatives.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever Medium: https://medium.com/the-web-crunch-publication

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting ... https://www.youtube.com/watch?v=e8O1qLEfVHs