Need help making modified Marketo landing page responsive

[Chelsea_Hwang]

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‌

[SanfordWhiteman]

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]

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]

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