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: http://bit.ly/2us87hd

Any help would be greatly appreciated.

Thanks!

@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.

Jake

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

image

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.

Jake

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.

Jake

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.

Jake

Hi @John_Borelli,

Would you mind assisting with the div and id?

Any help you could offer would be extremely appreciated.

Jake

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.

http://fh496-63cbe5.pages.infusionsoft.net

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!

Jason