Announcement

Collapse
No announcement yet.

Home Page Block of White Space That I Can't get Rid Of :(

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Home Page Block of White Space That I Can't get Rid Of :(

    I have a large chunk of White Space ( 425 pixels tall ) That I would like to get rid of.
    Using the Suivant Theme, but heavily customizing it ( GUTTING IT ) to suit the owner's
    web preferences.
    Problem is on the home page:
    www.homesurplus.com
    Below the Banner "Style and Savings Since 1977" There is this Large Patch of emptiness that
    I can't figure out how to remove.
    I just want that banner, then the global footer.
    Here is the Global Header butchering I did to get the page looking the way it does now:

    Code:
    <!--[if lt IE 9]> <p class="message closable message-info browsehappy align-center"><a href="#" class="close">&times;</a>You are using an <strong>outdated</strong> browser.<br />Please <a href="http://browsehappy.com/" target="_blank" rel="nofollow">upgrade your browser</a> to improve your experience.</p> <![endif]-->
    <nav class="mobile-menu mobile-menu-left">
        <div class="row mobile-navigation-header">
            <mvt:if expr="g.Basket:cust_id">
                <a href="&mvt:global:secure_sessionurl;Screen=ACLN&amp;Store_Code=&mvta:store:code;" rel="nofollow" class="column one-third align-center bg-gray charcoal"><span data-rt-icon="&#x61;"></span><small>ACCOUNT</small></a>
            <mvt:else>
                <a href="&mvt:global:secure_sessionurl;Screen=LOGN&amp;Store_Code=&mvta:store:code;" rel="nofollow" class="column one-third align-center bg-gray charcoal"><span data-rt-icon="&#x61;"></span><small>ACCOUNT</small></a>
            </mvt:if>
            <a href="&mvt:global:sessionurl;Screen=CTUS&amp;Store_Code=&mvta:store:code;" rel="nofollow" class="column one-third align-center bg-gray charcoal"><span data-icon="&#xe090;"></span><small>CONTACT</small></a>
            <a href="&mvt:global:sessionurl;Screen=BASK&amp;Store_Code=&mvta:store:code;" rel="nofollow" class="column one-third align-center bg-sky white"><span data-rt-icon="&#x65;"></span><small>MY CART</small></a>
        </div>
        <form action="&mvt:global:protocol_relative_url;Screen=SRCH" method="post" class="row mobile-navigation-search">
            <input type="hidden" name="Store_Code" value="&mvte:store:code;" />
            <input type="search" name="Search" value="&mvte:global:Search;" placeholder="Search&hellip;" class="column four-fifths bg-transparent" />
            <button type="submit" class="button button-square column one-fifth bg-transparent"><span data-icon="&#x55;"></span></button>
        </form>
        <div id="js-mobile-navigation" class="mobile-navigation"></div>
    </nav>
    <!-- end mobile-navigation -->
    <div id="js-site-overlay" class="site-overlay"></div>
    <!-- end site-overlay -->
    <div id="js-site-wrapper" class="site-wrapper">
        <header id="js-header" class="header clearfix">
            <div class="pre-header clearfix bg-charcoal">
                <nav class="row wrap">
                    <ul class="align-center">
                        <li class="pre-header--promo"><mvt:item name="readytheme" param="banner( 'promo-message' )" /></li>
                    </ul>
                </nav>
            </div>
            <!-- end pre-header -->
            <div id="js-main-header" class="row wrap main-header vertical-align-parent">
                <ul class="medium-all-hidden no-list mobile-main-header">
                    <li class="column one-sixth toggle-slide-left mobile-menu-button"><span data-icon="&#x61;"></span></li>
                    <li class="column two-thirds">
                        <a href="merchant.mvc?&Store_Code=homesurplus&Screen=SFNT" title="&mvt:global:store:name;" class="align-center" rel="nofollow">
                            <mvt:if expr="l.settings:readytheme:logo_type EQ 'text'">
                                <span class="h1 show uppercase masthead--name">&mvt:readytheme:logo_name;</span>
                                <span class="h3 show italic nm masthead--tagline">&mvt:readytheme:logo_tagline;</span>
                            <mvt:elseif expr="l.settings:readytheme:logo_type EQ 'image'">
                                <img src="&mvte:readytheme:logo_image;" alt="&mvt:readytheme:logo_alt;" title="&mvt:readytheme:logo_alt;" />
                            </mvt:if>
                        </a>
                    </li>
                    <li id="js-mobile-basket-button" class="column one-sixth nlp mobile-basket-button"><span data-rt-icon="&#x65;" class="bg-sky white"><span class="notification bg-red white basket-count">&mvte:global_minibasket:basket_count;</span></span></li>
                </ul>
                <a href="http://&mvt:global:domain:name;/" title="&mvt:global:store:name;" class="column all-hidden medium-all-shown medium-two-fifths large-one-third align-center medium-align-left vertical-align">
                    <mvt:if expr="l.settings:readytheme:logo_type EQ 'text'">
                        <span class="h1 show uppercase masthead--name">&mvt:readytheme:logo_name;</span>
                        <span class="h3 show italic nm masthead--tagline">&mvt:readytheme:logo_tagline;</span>
                    <mvt:elseif expr="l.settings:readytheme:logo_type EQ 'image'">
                        <img src="&mvte:readytheme:logo_image;" alt="&mvt:readytheme:logo_alt;" title="&mvt:readytheme:logo_alt;" />
                    </mvt:if>
                </a>
                <div class="column all-hidden medium-all-shown medium-three-fifths large-two-thirds align-right">
                    <div class="column whole np service-links uppercase">
                        <span data-icon="&#xe090;"></span> Keyport &mvt:global:store:phone;<span class="breadcrumb-border">|</span>
                        <!-- Adding Bellmawr Phone -->
                        <span data-icon="&#xe090;"></span> Bellmawr 856-931-8900<span class="breadcrumb-border">|</span>
                        <mvt:if expr="g.Basket:cust_id">
                            <mvt:item name="cssui_links" param="orderhistory"><span data-rt-icon="&#X68;"></span> Orders</mvt:item><span class="breadcrumb-border">|</span>
                        <mvt:else>
                            <mvt:item name="cssui_links" param="orderhistory_login"><span data-rt-icon="&#X68;"></span> Orders</mvt:item><span class="breadcrumb-border">|</span>
                        </mvt:if>
                        <mvt:item name="customerlink" />
                    </div>
                    <div class="column whole np">
                        <div class="mini-basket">
                            <a href="&mvt:global:sessionurl;Screen=BASK&amp;Store_Code=&mvta:store:code;" rel="nofollow" id="js-mini-basket"><span data-rt-icon="&#x65;" class="bg-sky white"><span id="js-mini-basket-count" class="notification bg-red white basket-count">&mvte:global_minibasket:basket_count;</span></span><span class="align-middle ultrabold uppercase"> Shopping Cart</span></a>
                        </div>
                    </div>
                </div>
                <mvt:item name="global_minibasket" />
            </div>
            <!-- end main-header -->
            <mvt:item name="readytheme" param="navigationset( 'navigation_bar' )" />
            <!-- end navigation-bar -->
        </header>
        <!-- end header -->
        <main>
            <mvt:item name="breadcrumbs" />
            <mvt:if expr="l.settings:page:code EQ 'SFNT'">
                <div class="row sfnt-hero">
                    <!--
                    <mvt:item name="readytheme" param="image( 'sfnt_hero' )" />
                    -->
    <!-- NEW LINKS START HERE -->
    <br>
    <br>
    <div align="center">
    
    <a href="merchant.mvc?Store_Code=homesurplus&Screen=CTGY&Category_Code=KITCHENS">
    <img style="border: 0px solid ; max-width: 100%; height: auto;" alt="Click Here For Kitchen Cabinets!" title="Click Here For Kitchen Cabinets!" src="graphics/00000001/2016_index_product_kitchens_376_wide.jpg"></a>&nbsp;
    
    <a href="merchant.mvc?Screen=CTGY&Store_Code=homesurplus&Category_Code=exteriordoors">
    <img style="border: 0px solid ; max-width: 100%; height: auto;" alt="Click Here For Exterior Doors!" title="Click Here For Exterior Doors!" src="graphics/00000001/2016_index_product_exterior_doors_376_wide.jpg"></a>&nbsp;
    
    <a href="merchant.mvc?Store_Code=homesurplus&Screen=CTGY&Category_Code=vanities">
    <img style="max-width: 100%; height: auto;" alt="Click Here For Vanities!" title="Click Here For Vanities!" src="graphics/00000001/2016_index_product_vanities_376_wide.jpg"></a>
    
    <br><br>
    
    <a href="merchant.mvc?Store_Code=homesurplus&Screen=CTGY&Category_Code=GRANITETOPS">
    <img style="max-width: 100%; height: auto;" alt="Click Here For Granite and Marble Tops!" title="Click Here For Granite and Marble Tops!" src="graphics/00000001/2016_index_product_granite_tops_376_wide.jpg"></a>&nbsp;
    
    <a href="merchant.mvc?Screen=CTGY&Store_Code=homesurplus&Category_Code=interiordoors">
    <img style="border: 0px solid ; max-width: 100%; height: auto;" alt="Click Here For Interior Doors!" title="Click Here For Interior Doors!" src="graphics/00000001/2016_index_product_interior_doors_376_wide.jpg"></a>&nbsp;
    
    <a href="merchant.mvc?Store_Code=homesurplus&Screen=CTGY&Category_Code=FLOORING">
    <img style="border: 0px solid ; max-width: 100%; height: auto;" alt="Click Here For Flooring!" title="Click Here For Flooring!" src="graphics/00000001/2016_index_product_flooring_376_wide.jpg"></a>
    
    <br><br>
    
    <a href="merchant.mvc?Store_Code=homesurplus&Screen=CTGY&Category_Code=SinksandFaucets">
    <img style="max-width: 100%; height: auto;" alt="Click Here For Sinks and Faucets!" title="Click Here For Sinks and Faucets!" src="graphics/00000001/2016_index_product_sinks_faucets_376_wide.jpg"></a>&nbsp;
    
    <a href="merchant.mvc?Store_Code=homesurplus&Screen=CTGY&Category_Code=WoodMoulding">
    <img style="border: 0px solid ; max-width: 100%; height: auto;" alt="Click Here For Moulding!" title="Click Here For Moulding!" src="graphics/00000001/2016_index_product_moulding_376_wide.jpg"></a>&nbsp;
    
    <a href="merchant.mvc?Screen=CTGY&Store_Code=homesurplus&Category_Code=lockshardware">
    <img style="border: 0px solid ; max-width: 100%; height: auto;" alt="" title="Click Here For Door Hardware!" title="Click Here For Door Hardware!" src="graphics/00000001/2016_index_product_door_hardware_376_wide.jpg"></a>
    
    <br>
    
    </div>
    <br><br><br>
    <!-- NEW LINKS END HERE -->
            </mvt:if>
            <div class="wrap">
                <mvt:if expr="g.Maintenance_Warning_Message">
                    <div class="row">
                        <div class="column whole">
                            &mvt:global:Maintenance_Warning_Message;
                        </div>
                    </div>
                </mvt:if>
                <div class="row">
                    <mvt:if expr="l.settings:page:code NE 'SFNT'">
                        <mvt:if expr="l.settings:page:code EQ 'CTGY'">
                            <mvt:if expr="NOT ISNULL l.settings:category_title:image">
                                <img class="column whole h4 page-title" src="&mvte:category_title:image;" alt="&mvte:category:name;" title="&mvte:category:name;" />
                            <mvt:else>
                                <h1 class="column whole large-np page-title">&mvte:category:name;</h1>
                            </mvt:if>
                        <mvt:elseif expr="l.settings:page:code EQ 'PROD' OR l.settings:page:code EQ 'PATR' OR l.settings:page:code EQ 'ORDL' OR l.settings:page:code EQ 'OCST' OR l.settings:page:code EQ 'OUS1' OR l.settings:page:code EQ 'OUSM' OR l.settings:page:code EQ 'UATM' OR l.settings:page:code EQ 'UATR' OR l.settings:page:code EQ 'OSEL' OR l.settings:page:code EQ 'OPAY' OR l.settings:page:code EQ 'INVC'">
                            <div class="breaker"></div>
                        <mvt:else>
                            <h1 class="column whole large-np page-title">&mvte:page:name;</h1>
                        </mvt:if>
                    </mvt:if>
                    <div class="column-right column whole push-none large-three-fourths large-push-one-fourth x-large-four-fifths x-large-push-one-fifth large-nrp">
                        <div class="main-content">
    I've tried switching off the "Content" item for the Storefront . . . I Tried commenting out Divs in the Global Header below that Banner, but it Adversely effects All
    pages on the site. Can anyone send me in the right direction to lose this white space?
    Thanks Very much in advance! :)
    Mark
    ..

    #2
    Try removing the following code from the Storefront (SFNT) Header template:

    Code:
    <div class="column hide medium-show medium-half align-center">
        <mvt:item name="readytheme" param="image( 'storefront_promo' )" />
    </div>
    <div class="column whole medium-half align-center">
        <mvt:item name="readytheme" param="image( 'storefront_new' )" />
    </div>
    <div class="column whole medium-half align-center">
        <mvt:item name="readytheme" param="image( 'storefront_sale' )" />
    </div>
    <div class="breaker clear"></div>

    Comment


      #3
      Thank You Dan! - Sorry to say, the wide band of white remained. I remember Commenting that code out except for the "breaker clear" <div>, but i went ahead and removed that whole section you show above. 'Refreshed the home page, then tried it in another browser. The empty patch remained. It's a real stumper to me. O_o

      Comment


        #4
        Looks like there is a div using the "column-right" class with a min-height of 30rem; causing the remaining white space. I seem to recall that being present in older versions of the Suivant theme, but I could be wrong, might just be a customization. Either way, that is most likely your culprit with the other banner code removed.

        Comment


          #5
          Thank you for examining this Dan. It does look like the GLOBAL aspect of the SFNT banner and the <div> tags below it, bleeds right into the Content of every page. Rather than experiment with the CSS, I decided to throw in the towel and put something there. ( Maps to the store locations with links to google.) Sometimes we make a better movie when the shark is broken. :)

          Comment


            #6
            It shouldn't bleed into every page and the fix should be relatively simple, but difficult to give you the exact solution from this side of things. If you ever decide you want it resolved, feel free to reach out to us.

            Comment

            Working...
            X