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