SOLVED

Re: White bar down right side of template

Go to solution
Johnathan_Moore
Level 1

White bar down right side of template

Hi! When I make the browser smaller (or mobile) on pages with the standard LP template, a white bar appears along the body of the page. Can anyone help me figure out what's going on here? If I put some needle in this haystack, is there a way I can just get the original seeded template file? (yeah, I've now learned my lesson for having backups on backups). url: Schedule a Meeting

Thank you all so much.

<!DOCTYPE html>

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->

<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->

<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->

<html lang="en"> <!--<![endif]-->

<!--------------------------------

Header and Footer color = #1D1B1C

Section color = #F1BC02

Button Banner color = #007CD7

Button Banner Hover color = #007CD7

----------------------------------->

<head>

  <link rel="icon" href="https://i1.wp.com/www.vitac.com/wp-content/uploads/2017/06/cropped-Favicon-01.png?fit=32%2C32" sizes="32x32">

<meta charset="utf-8">

<title>Landing Page</title>

<meta name="author" content="">

<meta name="keywords" content="">

<meta name="description" content="">

  

    <!-- Marketo Variable Definitions -->

    <meta class="mktoColor" id="headerBgColor" mktoName="Header Background Color" default="#1D1B1C">

    <meta class="mktoString" id="logoLink" mktoName="Logo Link" default="#">  

    <meta class="mktoString" id="bannerBackgroundImg" mktoName="Banner Background Image" default="http://pages.vitac.com/rs/961-BLB-526/images/bannerBG.jpg">

  

<meta class="mktoColor" id="bannerBgColor" mktoName="Banner Background Color" default="#ffffff">

  

    <meta class="mktoString" id="bannerButtonLabel" mktoName="Banner Button Label" default="Download Now">

    <meta class="mktoString" id="bannerButtonLink" mktoName="Banner Button Link" default="#">

    <meta class="mktoColor" id="bannerButtonBgColor" mktoName="Banner Button Color" default="#007CD7">

    <meta class="mktoColor" id="bannerButtonBgHoverColor" mktoName="Banner Button Hover Color" default="#007CD7">

    <meta class="mktoColor" id="section1BgColor" mktoName="Section-1 Background Color" default="#ffffff">

    <meta class="mktoColor" id="section2BgColor" mktoName="Section-2 Background Color" default="#ffffff">

    <meta class="mktoColor" id="section3BgColor" mktoName="Section-3 Background Color" default="#F1BC02">

    <meta class="mktoColor" id="section4BgColor" mktoName="Section-4 Background Color" default="#ffffff">

<meta class="mktoColor" id="section5BgColor" mktoName="Section-5 Background Color" default="#ffffff">

    <meta class="mktoColor" id="section6BgColor" mktoName="Section-6 Background Color" default="#ffffff">

    <meta class="mktoColor" id="section7BgColor" mktoName="Section-7 Banner Background Color" default="#F1BC02">

    <meta class="mktoString" id="section7VideoLink" mktoName="Sec. 7  Video URL" default="//player.vimeo.com/video/60223294">

    <meta class="mktoColor" id="section8BgColor" mktoName="Section-8 Background Color" default="#ffffff">

<meta class="mktoColor" id="footerBgColor" mktoName="Footer Background Color" default="#1D1B1C">

  

    <meta class="mktoBoolean" id="showHeader" mktoName="Show Header Section?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showBanner" mktoName="Show Banner Section?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showBannerButton" mktoName="Show Banner Button?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showSection1" mktoName="Show Section 1?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showSection2" mktoName="Show Section 2?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showSection2Content" mktoName="Show Section 2 Text?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showSection2Form" mktoName="Show Form?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

<meta class="mktoBoolean" id="showSection3" mktoName="Show Section 3?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showSection4" mktoName="Show Section 4?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showSection5" mktoName="Show Section 5?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showSection6" mktoName="Show Section 6?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showSection7" mktoName="Show Section 7?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showSection8" mktoName="Show Section 8?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

    <meta class="mktoBoolean" id="showFooter" mktoName="Show Footer Section?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">

<!-- Mobile Specific Metas -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Libs CSS -->

<link href="http://pages.vitac.com/rs/961-BLB-526/images/bootstrap.css" rel="stylesheet">

<!-- Template CSS -->

<link href="http://pages.vitac.com/rs/961-BLB-526/images/style-mkto.css" rel="stylesheet">

<!-- Google Fonts -->

    <link href="https://nation.marketo.com//fonts.googleapis.com/css?family=Open+Sans:400italic,400,800,700,300" rel="stylesheet" type="text/css">

<!--[if lt IE 9]>

<script src="http://pages.vitac.com/rs/961-BLB-526/images/html5shiv.js"></script>

<script src="http://pages.vitac.com/rs/961-BLB-526/images/respond.js"></script>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<![endif]-->

    <style>

/* ==========================================================================

DO NOT EDIT - UNLESS YOU KNOW WHAT YOUR DOING

========================================================================== */

/* Header Section  */

    #headerSection {

      background-color: ${headerBgColor};

    }

/* Banner Section  */

    #banner {

      background-color: ${bannerBgColor} !important;

background-image: url(${bannerBackgroundImg}) !important;

        height: auto !important;

        background-attachment: local !important;

    }

/* Section 1 */

    #section1 {

      background-color: ${section1BgColor};

    }

/* Section 2 */

    #section2 {

      background-color: ${section2BgColor};

    }

/* Section 3 */

    #section3 {

      background-color: ${section3BgColor};

    }

/* Section 4 */

    #section4 {

      background-color: ${section4BgColor};

    }

/* Section 5 */

    #section5 {

      background-color: ${section5BgColor};

    }

/* Section 6 */

    #section6 {

      background-color: ${section6BgColor};

    }

/* Section 7 */

    #section7 {

      background-color: ${section7BgColor};

    }

/* Section 8 */

    #section8 {

      background-color: ${section8BgColor};

    }

/* Footer Section  */

#footerSection {

      background-color: ${footerBgColor};

padding:25px 0px 15px 0px;

    }

@media only screen and (min-width: 768px) and (max-width: 959px) {

.section5-img {float:none !important;}

}

@media only screen and (max-width: 768px) {

.features .line-font img {margin-top:0 !important; margin-bottom:0 !important;}

.section5-img {float:none !important;}

}

@media only screen and (max-width: 479px) {

.features .line-font img {margin-top:0 !important; margin-bottom:0 !important;}

.section5-img {float:none !important;}

}

/* ==========================================================================

Basic Styling

========================================================================== */

body { width: 100%; min-height: 100%; font-family: "Open Sans", "Helvetica Neue", Lucida Sans Unicode, Verdana, Helvetica, sans-serif; font-size: 14px; line-height: 23px; color: #7a7a7a; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}

h1, h2, h3, h4, h5, h6 { font-weight: 300; font-family:"Helvetica Neue", Helvetica, Arial,sans-serif; color: #1a1a1a; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out;}

h1, h2, h3, h4, h5, h6 { margin-top: 0;  margin-bottom: 10px;}

h1 {font-size: 44px;}

h2 {font-weight: 700; margin-bottom: 20px; }

h3 {}

h4 {font-size: 17px; font-weight: 700; color: #2d2d2d;}

p { margin-bottom: 20px; line-height: 24px;}

a {-webkit-transition: all 150ms ease-in; -moz-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; transition: all 150ms ease-in; color: #00a8d6;}

a:hover, a:focus { text-decoration: none; color: #007DA0; outline: none; }

ul {list-style-type: circle;}

::-moz-selection { text-shadow: none; background: #08b4da; color: #FFF;}

::selection { text-shadow: none; background: #08b4da; color: #FFF; }

.btn {-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; border-radius: 0; padding: 15px 35px; font-weight: bold;}

.btn:hover, .btn:focus { background-color:#08b4da; color: #FFF; opacity: .7;}

.btn-transparent {background-color: ${bannerButtonBgColor}; color: #ffffff; }

.btn-transparent:hover {background-color: ${bannerButtonBgHoverColor}; opacity:.7;}

.img-responsive img {display: block; width: auto; max-width: 100%;}

.footer p, .footer a {color: #ffffff; margin-bottom: 10px;}

.footer-links {text-align:right;}

.formStyle {margin:0 auto; width:50%;}

/* ==========================================================================

FORM 2.0 -- Simple Form STYLES ONLY

========================================================================== */

  .mktoForm .mktoButtonWrap.mktoSimple .mktoButton {

  -webkit-border-radius: 5px;

  -khtml-border-radius: 5px;

  -moz-border-radius: 5px;

  -ms-border-radius: 5px;

  -o-border-radius: 5px;

  border-radius: 5px;

  color: #fff;

  border: none !important;

  padding:12px 14px !important;

  font-size: 1em;

  background: #007CD7;

  background-color: #007CD7 !important;

  background-image:  none !important;

  background-image:  none !important;

  background-image:  none !important;

  background-image:  none !important;

  text-transform: none !important;

/*   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#962D9E), to(#64038D)) !important;

  background: -webkit-linear-gradient(#962D9E, #64038D) !important;

  background: -moz-linear-gradient(#962D9E, #64038D) !important;

  background: -ms-linear-gradient(#962D9E, #64038D) !important;

  background: -o-linear-gradient(#962D9E, #64038D) !important;

  background: linear-gradient(#962D9E, #64038D) !important;

  -pie-background: linear-gradient(#962D9E, #64038D) !important;

*/

}

  .mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {

  border: none !important;

  background: #007CD7!important;

  opacity:.7 !important;

  }

</style>

    

</head>

<body data-spy="scroll" data-target=".navigation">

<!-- Start Header -->

<div id="header" style="min-height:95px;">

         <div style="display:${showHeader};">

<nav id="headerSection" class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="container">

<div class="navbar-header" style="text-align:center !important; width:100% !important;">

<!-- Start Logo / Text -->

<a class="navbar-brand text-logo" href="${logoLink}" style="width:100%;">

                        <div class="mktoImg" id="logoImg" mktoName="Logo" style="min-height:60px; min-width:100px;">

                        <img width="auto" src="http://pages.vitac.com/rs/961-BLB-526/images/logo-vitac.png">

                        </div>

                        </a>

                      

<!-- End Logo / Text -->

</div>

</div>

</nav>

</div>

        </div>

<!-- End Header -->

      

<!-- Banner -->

           <div style="display:${showBanner};">

    <div id="banner" class="bg-blur">

<div class="banner-content">

<div class="container">

<div class="row">

<!-- Start Header Text -->

<div class="col-md-12 col-sm-12">

                <div class="mktoText" id="banner-section" mktoName="Banner Section">

                    <div class="text-center">

<h1><strong>Banner</strong> Section</h1>

                        </div>

<p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Praesent sapien massa.</p>

<p>Donec sollicitudin molestie malesuada quis lorem ut libero malesuada feugiat.</p>

                        </div>

                      

                    <div class="text-center" style="display:${showBannerButton};">

                        <a href="${bannerButtonLink}"><button class="btn btn-transparent btn-big">${bannerButtonLabel}</button></a>

                        </div>

</div>

</div>

<!-- End Header Text -->

</div>

</div>

            </div>

</div>

<!-- End Banner -->

<!-- Section 1 -->

  <div id="section1" style="display:${showSection1};">

<section id="intro" class="padding40">

<div class="container">

<div class="row">

<div class="col-md-12 headline">

                <div class="mktoText" id="section-1" mktoName="Section 1">

<h2>Section 1 Title Goes Here</h2>

<p>Lorem ipsum dolor elit sed sit amet, consectetur adipisicing elit, sed do tempor incididunt ut labore et dolore magna aliqua.</p>

                </div>

</div>

</div>

            </div>

            </section>

            </div>

          

          

<div><!-- Separator -->

          

          

             <!-- Section 2 --> 

      <div id="section2" style="display:${showSection2};">

<div class="container padding40 paddingbottom-15">

<div class="row">

<div name="main-content" style="display:${showSection2Content};">

<div class="col-md-6" id="main-content">

                 

<div class="mktoText" id="section-2-left" mktoName="Section 2 Left Content" style="padding:0px 20px;">

<h2>Section 2 Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <strong>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Ut ad minim veniam.</p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus etel ultrices posuere cubilia Curae.</p>

                </div>

              

</div>

                </div>

              

<div name="main-form" style="display:${showSection2Form};">

<div class="col-md-5 col-md-offset-1" id="main-form">

<div class="mktoForm" id="primaryForm" mktoName="Primary Form" style="margin-bottom:40px;padding:10px 20px;min-height:80px;">

                    </div>

</div>

                </div>

</div>

            </div>

       </div>

          

            <div>

          

          

            <!-- Section 3 -->

                  <div id="section3" style="display:${showSection3};">

<section id="three-main" class="section30 white-text padding40">

<div class="container">

<div class="row">

<div class="col-lg-12">

                <div class="mktoText" id="section-3" mktoName="Section 3 Headline">

<div class="headline">

<h2>Section 3 Headline</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquando posse.</p>

</div>

                    </div>

</div>

</div>

<div class="row text-center">

<div class="col-md-4">

                <div class="mktoText" id="section-3-1" mktoName="Section 3 Point 1">

<div class="main-point"><!-- Main Point -->

<div class="line-font">

                        <img src="//www.placehold.it/175x125">

                        </div><!-- Main Point Icon -->

<h3>Section 3 Point 1</h3><!-- Main Point Title -->

<p>Lorem ipsum dolor sit amet, magna consectetur adipisicing elit, sed do eiusmod incididunt. </p><!-- Main Point Text -->

</div><!-- End Main Point -->

                    </div>

</div>

<div class="col-md-4">

                <div class="mktoText" id="section-3-2" mktoName="Section 3 Point 2">

<div class="main-point">

<div class="line-font">

                        <img src="//www.placehold.it/175x125">

                        </div>

<h3>Section 3 Point 2</h3>

<p>Lorem ipsum dolor sit amet, magna consectetur adipisicing elit, sed do eiusmod incididunt. </p>

</div>

                    </div>

</div>

<div class="col-md-4">

                <div class="mktoText" id="section-3-3" mktoName="Section 3 Point 3">

<div class="main-point">

<div class="line-font">

                        <img src="//www.placehold.it/175x125">

                        </div>

<h3>Section 3 Point 3</h3>

<p>Lorem ipsum dolor sit amet, magna consectetur adipisicing elit, sed do eiusmod incididunt. </p>

</div>

                    </div>

</div>

</div>

</div>

</section>

    </div>

    </div>

<!--End Section 3 -->

  

    <div><!-- Separator -->

          

<div class="container">

              <div id="section4" style="display:${showSection4};">

<div class="row paddingtop-40">

<div class="col-lg-6 col-md-6">

                <div class="mktoText img-responsive" id="section-4-image" mktoName="Section 4 Image">

<img src="//www.placehold.it/530x380" alt="" title="">

                </div>

</div>

<div class="col-lg-6 col-md-6">

                <div class="mktoText" id="section-4" mktoName="Section 4 Points">

<div class="features"><!-- Main Points -->

<h3>Section 4 - Point 1</h3><!-- Main Title -->

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p><!-- Main Text -->

</div><!-- End Main Points -->

<div class="features">

<h3>Section 4 - Point 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

</div>

<div class="features">

<h3>Section 4 - Point 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

</div>

                    </div>

</div>

              </div>

</div>

      

           <div id="section5" style="display:${showSection5};">

            <div class="row section paddingtop-40">

<div class="col-lg-6 col-md-6 section5-img" style="float:right;">

                <div class="mktoText img-responsive" id="section-5-image" mktoName="Section 5 Image">

<img src="//www.placehold.it/530x380" alt="" title="">

                </div>

</div>

<div class="col-lg-6 col-md-6" style="float:left;">

                <div class="mktoText" id="section-5" mktoName="Section 5 Text">

<h2>Section 5 Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <strong>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Ut ad minim veniam.</p>

<p>Vestibulum ante ipsum primis in faucibus orci luctus etel ultrices posuere cubilia Curae.</p>

                </div>

</div>

</div>

          </div>

          

          <div id="section6" style="display:${showSection6};">

<div class="row section paddingbottom-50">

<div class="col-md-6">

                <div class="mktoText img-responsive" id="section-6-image" mktoName="Section 6 Image">

<img src="//www.placehold.it/530x380" alt="" title="">

                </div>

</div>

<div class="col-md-6">

                <div class="mktoText" id="section-6" mktoName="Section 6 Text">

<div>

<h2>Section 6 Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <strong>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>

<ul class="green-arrow"><!--Green arrow list -->

<li>Many addon features</li>

<li>Fully responsive &amp; adaptive</li>

<li>SEO optimized</li>

<li>Attractive with a modern touch</li>

<li>Full Support</li>

</ul>

</div>

                    </div>

</div>

</div>

            </div>

            </div>

          

          

            <div>

            <!-- Video -->

  <div id="section7" style="display:${showSection7};">

<section id="how-it-works" class="section30 bg-section white-text padding40">

<div class="container">

<div class="row">

<div class="col-lg-12">

                <div class="mktoText" id="section-7" mktoName="Section 7">

<div class="headline">

<h2>Section 7 Video Title</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquando posse.</p>

</div>

                 </div>

</div>

</div>

<div class="row">

  <div class="col-md-2"></div>

<div class="col-md-8">

<div class="video-container">

<iframe src="${section7VideoLink}"></iframe> <!-- Responsive video iframe -->

</div>

                    <div class="col-md-2"></div>

</div>

</div>

</div>

</section>

  </div>

<!-- Video -->

  

<div>

  

  

    <!-- Client Logos -->    

  <div id="section8" style="display:${showSection8};">

<div id="clients" class="padding40 bg-grey hidden-xs">

<div class="container">

                <div class="mktoText" id="section-8" mktoName="Section 8">

<ul class="list-inline clients-logo text-center">

<li><img src="//www.placehold.it/175x35/333333/ffffff" alt="" title=""  /></li><!--Image path of logo -->

<li><img src="//www.placehold.it/175x35/333333/ffffff" alt="" title="" /></li>

<li><img src="//www.placehold.it/175x35/333333/ffffff" alt="" title="" /></li>

<li><img src="//www.placehold.it/175x35/333333/ffffff" alt="" title="" /></li>

</ul>

          </div>

</div>

</div>

  </div>

<!-- End Client Logos -->

<!-- Footer Bottom -->     

  <div id="footerSection" style="display:${showFooter};">

<footer class="footer">

<div class="container">

<div class="row">

<div class="col-lg-6 col-sm-6 text-center">

                <div class="mktoText" id="footer-copyright" mktoName="Copyright">

<p>&copy; <script type="text/javascript">

  document.write(new Date().getFullYear());

</script> VITAC </p>

                </div>

</div>

<div class="col-lg-6 col-sm-6 footer-links text-center">

                <div class="mktoText" id="footer-links" mktoName="Footer Links">

<a href="http://www.vitac.com/privacy-notice/">Privacy Notice</a> | <a href="http://www.vitac.com/contact-us/">Contact Us</a>

                </div>

</div>

</div>

</div>

</footer>

    </div>

<!-- End Footer Bottom -->

  

<script>

    if ('${showSection2Form}' == 'none') {

          document.getElementById('main-content').style.setProperty('width','100%','important')

        } else {}

if ('${showSection2Content}' == 'none') {

          document.getElementById('main-form').className = "formStyle";

        } else {}

</script>

</body>

</html>

1 ACCEPTED SOLUTION

Accepted Solutions
Johnathan_Moore
Level 1

Re: White bar down right side of template

I fixed this by adding the following in the style section:

.container {

overflow: hidden;

}

View solution in original post

2 REPLIES 2
SanfordWhiteman
Level 10 - Community Moderator

Re: White bar down right side of template

Please move the thread to Products​ and link to an actual running URL.

Johnathan_Moore
Level 1

Re: White bar down right side of template

I fixed this by adding the following in the style section:

.container {

overflow: hidden;

}