Share Your Work

BootstrapC
Top Contributor | Partner
Top Contributor | Partner

New Mobile-friendly Landing Page Parallax Hero Banner

The Parallax Hero Banner module is very popular in the marketplace but I noticed it had a few  negative reviews mentioning how it wasn't performing well on mobile. Below is an example.

 

"We liked it initially, but after using it a bit we found that the image didn't render on phones well (not the phone view in edit mode), also it left space vertically; sadly we took it off." - Bob Burk

 

So I decided to address these issues and create my own module to make it work better on mobile devices by using two images instead of one. One square image for mobile and one rectangle image for larger width screends. This gives the author some "art-direction" control on how the banner looks on different devices.
View a demo.

 

If you have used the HubSpot version in the past I would suggest you check out my new module in the marketplace.

 

parallax-hero-banner-mobile-optimized

Would also appreciate any feedback you might have.


Jacob Lett

Freelance HubSpot CMS Developer & Web Designer


bootstrapcreative-horizontal-trim.png

Located in Michigan, USA

Get a free estimate now 


HubSpot Themes

Jake LettHubSpot Theme Designer & Developer
Shop my HubSpot Themes & Templates


2 Replies 2
vjuncoec
Participant

New Mobile-friendly Landing Page Parallax Hero Banner

Thank you for the guide. I followed instruction but I keep having trouble with responsive. Perhaps, should I change the size of the pictures?

I am using the same for both platform: pc and mobile.

0 Upvotes
natsumimori
Community Manager
Community Manager

New Mobile-friendly Landing Page Parallax Hero Banner

Thanks for sharing @BootstrapC !

You guys might be interested in this: @karstenkoehler , @Josh , @Mike_Eastwood , @Anton