SOLVED

Mobile Landing Page - moment of resize

Go to solution
JD_Nelson
Level 10 - Community Advisor

Mobile Landing Page - moment of resize

I'm using the new mobile landing page release and I love it.  I am using the functionality to change my landing page banner to a mobile-friendly version (shorter & narrower design) and it's awesome on a mobile device.  However, I then noticed that when I re-size my desktop window the banner changes to the mobile version somewhere around 1000px and appears to be about 50% of the 480px banner size.  As I continue to re-size the window smaller and get to the 480px width, the rest of the page re-renders and the banner graphic is then full size and looks great.  I'm curious if the page renders on a smaller monitor (~1000px) if they'll have a poor experience; or better yet, if there's a way to fix this?

Anyone else seeing this issue?
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Edward_Unthank_
Level 10

Re: Mobile Landing Page - moment of resize

The problem code is on line 267: img {max-width: 100%;}. I can't tell if it's custom code that's been there before or if it's with the new release—my guess is it's old code. The breakpoint it's focusing is on 768px, which is why it looks like it jumps twice. 

When I removed that line, the mobile version and in-betweens look great!

Check in your landing page template and landing page editor to see if it's residual code from before. If it's not on your end, it might be a bug that Marketo can squash. (You can CTRL+F "img {max-width: 100%;}" to see if it's in the template.)

Edward Unthank | Founder, Etumos

View solution in original post

4 REPLIES 4
Edward_Unthank_
Level 10

Re: Mobile Landing Page - moment of resize

Curious! Do you have a link to the landing page to check out the source code?
JD_Nelson
Level 10 - Community Advisor

Re: Mobile Landing Page - moment of resize

Here's a stripped version:
http://info.liveperson.com/mobile_testing.html

 
Edward_Unthank_
Level 10

Re: Mobile Landing Page - moment of resize

The problem code is on line 267: img {max-width: 100%;}. I can't tell if it's custom code that's been there before or if it's with the new release—my guess is it's old code. The breakpoint it's focusing is on 768px, which is why it looks like it jumps twice. 

When I removed that line, the mobile version and in-betweens look great!

Check in your landing page template and landing page editor to see if it's residual code from before. If it's not on your end, it might be a bug that Marketo can squash. (You can CTRL+F "img {max-width: 100%;}" to see if it's in the template.)

Edward Unthank | Founder, Etumos
JD_Nelson
Level 10 - Community Advisor

Re: Mobile Landing Page - moment of resize

Appears we have quite a bit of old code on our templates... most of which doesn't even do anything... that part, though, DID.  Thank you!