Need help making modified Marketo landing page responsive | Community
Skip to main content
Chelsea_Hwang
Level 1
September 7, 2019
Question

Need help making modified Marketo landing page responsive

  • September 7, 2019
  • 2 replies
  • 2584 views

Hi Marketo community,

We are stumped in trying to figure out why our new landing page template is not responsive and are hoping you can help us out. Please take a look at the attached code.

Thanks in advance, coding gurus!

#landingpage templates#landing page tokens#html expert#htmlhelp

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

SanfordWhiteman
Level 10
September 7, 2019

You should provide your URL, not just attach a file. Otherwise you're forcing people to host your page in addition to fixing your code. 

Also, "responsive" in its own right is ambiguous. What are your breakpoints and expected behaviors?

Dave_Roberts
Level 10
September 8, 2019

Hey Chelsea,

It looks like the reason this isn't responsive is that the "wrapper" class is modified in CSS to have a fixed width of 960px so when you're on a small screen it just kinda pushed out the right side of the screen.

To get this to line up a little better, I've written a few styles below in a media query which will target screens up to 991px wide. For anything larger than 991px (a standard desktop breakpoint) the wrapper having a width of 960px is ok, b/c that's less than the screen width.

@media screen and (max-width:991px){
.wrapper {width: 100%;} /* override fixed 960px width */
body {padding: 0;} /* remove body padding */
footer#footer {padding: 25px 20px;} /* apply footer padding */
}

Here's a run-down of what this code is doing line-by-line:

1. Begin the media query 

2. Adjust the wrapper class' width

3. Remove padding from the body -- the sections are already padded L/R.

4. Add L/R padding to the footer which is the only section without it.

5. End the media query

To put this into play on your template, you'll want to grab the CSS above and paste it just inside the closing style tag (</style> in the head of your template (on line 241)).

Chelsea_Hwang
Level 1
September 12, 2019

Thank you, Dave, for your very detailed explanation! We appreciate the help.