Landing Page Template - Div disappears in mobile

[Anonymous]

Background:

We have a landing page template that was created by a Marketo partner using the guided creation approach. The main body of this page is 2 columns (roughly 80% : 20%) and includes basic webkits for scaling. We were aiming at having both side-by-side divs scale to match the other's height, which we accomplished using the absolute div approach.

The Problem:

We have everything we want and the page renders well everywhere, with one very major exception. When the display size is scaled to mobile-size, the left div disappears and only the right div is shown. Has anyone ever experienced this before and do you know of a fix? Any help would be appreciated.

Thank you!

I have attached the code for reference.

[Justin_Cooperm2]

In your code, find

#right-column

{

        position: absolute;

        top: 0px;

        right: 0px;

        bottom: 0px;

}

You need to delete "position: absolute;" as that is not what you want.

[Anonymous]

Thank you Justin. This does help with the mobile issue, but we lose the fix for making both columns the same height. Any thoughts on how we can have the right and left column remain the same height, regardless of the amount of content in each?

[Justin_Cooperm2]

Find this section:

/* ---------------------------------------------------------------------- */

/* Media Query cusomization for responsiveness

/* ---------------------------------------------------------------------- */

Add the following at the top:

@media(min-width: 980px) { 

    #right-column

      {

      min-height:991px;

      }

}

Now find the next @media query:

@media(min-width: 768px) and (max-width: 979px)

Add the following within that existing query:

#right-column

{

min-height:1099px;

}

Now find the next @media query:

@media(min-width: 480px) and (max-width: 767px)

Add the following within that existing query:

#right-column

{

min-height:0px;

}

Now find the next @media query:

@media(max-width:480px)

Add the following within that existing query:

#right-column

{

min-height:0px;

}