Responsive Landing Page

Hi guys!

How do I make my landing page responsive? My background image on mobile looks awful and only captures a small snippet of the bigger image that appears on the desktop view.

Here is the link: Smithers | Men's Swimwear | Welcome

Any help would be greatly appreciated.


@Jake_Smith, it’s the parallax that is causing the mobile responsive capabilities for that image to not respond. I had the same issue and worked with the landing page developer on it - they know it’s an issue and are working on it. But for the meantime, removing the Parallax feature helps a lot. It’s too bad because I love the parallax.

1 Like

It looks like the default code is telling the image to center itself on mobile which causes the person to be out of frame.

Here’s a little CSS that might fix it for you:

.bgImage-0-215392 {
background-position: left center!important;

Just added an HTML block above the image and then use the above CSS like so:

EDIT: (added period to CSS)

1 Like

Thanks Cheryl & Mark.

Mark - I copied your code and added it to the new snippet as per your screenshot but it still fails to become responsive. Really appreciate you replying.

Cheryl - I may have to contact the landing page developer as well. If it’s a known issue I hope they can fix it soon. Did you use the same landing page template as the one in my link? I’m thinking I may have to change the template to one with a regular image - I’m assuming a normal image will be responsive?

Again, I’m really grateful to both of you for offering solutions.


Ohh. It looks like there should be a dot before bgImage-0-215392, it must not have copied in my previous post. This tells the CSS to target that class.

.bgImage-0-215392 {
background-position: left center!important;

If you just edit the code slightly, I think it’ll work.

1 Like

No dice! :pensive:

I think to make it truly responsive, you would have to wrap the image with a div tag, give the div an id and then use that id to set css width and height to a percentage rather than trying to align it.

1 Like

hmm… it looks like the class isn’t what it used to be.

.bgImage-0-287040 {
background-position: left center!important;

If you can get the style / class to work, it will look like this:

Hi Mark,

Here is a screenshot of the details I’ve added to the landing page including the code snippet and html text that I copy/pasted from you.

Any idea how to set up the sty;e/class? I’m brand new to coding so please excuse the ignorance.


Hi @Mark_Price & @John_Borelli ,

Here is a screenshot of the details I’ve added to the landing page including the code snippet and html text that I copy/pasted from an earlier post.

Any idea how to set up the style/class? I’m brand new to coding so please excuse my ignorance.


hmm… What you entered looks correct.

Did you re-approve the page? When checking the site code, it shows the old image class.

Hi @Mark_Price,

I republished again to be sure, to be sure and still no dice.

About 80% of my traffic comes from mobile devices so it’s a real shame it doesn’t look neat and tidy the way desktop or even tablet previews do.


Hi @John_Borelli,

Would you mind assisting with the div and id?

Any help you could offer would be extremely appreciated.


Hey @John_Borelli and/or @Mark_Price

I would love a little help. I’ve worked all the magic I can on my background image, but it’s still way too big and not adhering to the CSS rules you posted above.

On the desktop it’s okay, but on mobile it’s no good. And this is a better image than it was!

Any help is greatly appreciated!