Landing page is not responsive

[Alexis_D_Alba1]

Hey there,

We want the background image to fit inside a specific area and be responsive, but the height keeps shrinking when you shrink the viewport. Does anyone have any suggestions on how to fix this.  Examples are attached.

Thank you!

[Grégoire_Miche2]

Hi Alexis,

This does not seem to be a Guided Landing Page but an old fashion free-form one.

Freeform are not initially intended to be responsible as they natively use absolute positionning. Many people have turned them into responsive design but it really rely on some complex and not very stable css.

If I am right, you may want to consider evolving your LP templates to guided ones.

and in order to have this one fixed, this is really a CSS issue.

Greg

[Alexis_D_Alba1]

This is a Guided Landing Page

[Anonymous]

Try applying the following CSS property to the element with the background image:

background-size:cover;

background-position: top center;

Be sure to play with the behavior.

[Edward_Unthank_]

Hey Alexis, looks like the problem is that you have the background image set to 100% width. You can see the background image keep the exact same proportions, but that means that the height shrinks proportionally to the width. You'll have to choose another option for the background-image, such as right-aligning it and not expecting it to be 100% width at every viewport.

Another option is to plan the image to work at both the widest it will be (desktop version with 100% width) as well as smallest it will be (phone version). You can play with cropping, for example, so that the mobile version can have the woman fully standing tall where the desktop version has her lower torso cut off.

This is a design and art direction problem, not specific to any Marketo functionality, so you'll want to throw the problem back to your template designers and art designers.

Best,

Edward Unthank