Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


Quick coding question
New on LowEndTalk? Please Register and read our Community Rules.

Quick coding question

jbilohjbiloh Administrator

Recently something changed that caused the footer on LowEndBox (on pages other than the home page) to be displayed improperly.

Example of the correct visual design on the home page: https://lowendbox.com

Not correct: https://lowendbox.com/blog/lowendboxtv-fire-up-wordpress-in-only-3-commands/

Can anyone help me understand what might be causing this?

Using archive.org it seems something changed a few days ago, but I have no memory of changing anything that would cause this change.

Any input from our local coding experts here would be appreciated :)

Thanked by 1rajat
Jon Biloh

Comments

  • florianbflorianb Member

    You're missing a closing tag </div> before the <div id="footer".

  • SaahibSaahib Member
    edited June 2

    Unclosed <div> generally causes this. On quick look I suspect something with your ADS widget as they are in center on POST page while on home page they are "left-aligned" which may be causing mis-matched <div> tags on down on page.

  • raindog308raindog308 Administrator, Moderator

    I blame @raindog308

    For LET support, please visit the support desk.

  • @raindog308 said:
    I blame @raindog308

    Obviously :-)

    Thanked by 1raindog308
  • jbilohjbiloh Administrator
    edited June 2

    @florianb said:
    You're missing a closing tag </div> before the <div id="footer".

    @Saahib said:
    Unclosed <div> generally causes this. On quick look I suspect something with your ADS widget as they are in center on POST page while on home page they are "left-aligned" which may be causing mis-matched <div> tags on down on page.

    Thanks for the replies guys. Somehow I am still struggling to find the issue.

    The footer code is this:

        <!-- begin footer -->
        </div>
      </div>
    
      <?php if (!is_404()) { get_sidebar(); } ?>
    </div>
    
    <?php if (!is_404()) { ?>
    <div id="footerads" class='footimg'>
      <div id="bsap_xyz" class="bsarocks bsap_xyz footimg"></div>
    </div>
    <?php } /* !is_404() */ ?>
    <div id="footer">
      2008-<?php echo date('Y'); ?> &copy; LowEndBox. Part of WNY IT Services, Inc. <br/>
    <!--Powered by <a href="http://wordpress.org/" target="_blank">WordPress</a>.  Generated in <?php timer_stop(1); ?> seconds. <a href="/feed/">RSS Feed</a><br/> -->
        <a href="https://lowendbox.com/about/">About LowEndBox</a> - <a href="https://lowendbox.com/category/editorial">Editorials & News</a> - <a href="https://lowendbox.com/category/interview">Interviews</a> - <a href="https://lowendbox.com/category/tutorials">Tutorials</a> - <a href="https://lowendbox.com/virtual-private-server-frequently-asked-questions-vps-faq/">VPS Frequently Asked Questions</a>
    
    <div style="font-size:85%;text-align:center;clear:both;"><a href="https://www.buysellads.com/buy/detail/12523?utm_source=shorturl&utm_medium=twitter&utm_campaign=selfpromote">Advertise on LowEndBox.com</a></div>
    <div style="font-size:85%;text-align:center;clear:both;"><a href="https://lowendbox.com/privacy-policy/">Privacy Policy</a> <a href="/feed/" target='_blank'>RSS</a> <a href="https://lowendbox.com/sitemap_index.xml" target='_blank'>Site Map</a>
    </div>
    
    </div>
    
    <?php wp_footer(); ?>
    
    </body>
    </html>
    

    I don't remember editing the footer anytime in the past year. Could it be an issue in the index code?

    Jon Biloh
  • vovlervovler Member
    edited June 2

    This huge block of code is missing a closing div right before custom_html-2.
    I used waybackmachine to check the previous code that worked and compared the two. This is the only thing that pops up.

    Thanked by 1DreamCaster

    "They said it's RAID 5" - geekypixal

  • jbilohjbiloh Administrator

    @vovler said:
    This huge block of code is missing a closing div right before custom_html-2.
    I used waybackmachine to check the previous code that worked and compared the two. This is the only thing that pops up.

    Sent you a PM! :)

    Jon Biloh
  • The individual blog pages are served by a different php (single-post.php) file than the home page (which is usually home.php) (Reference - https://i.stack.imgur.com/L036X.png) This could be what is causing the missing </div>

    A long shot, I see the css on the home page is different from the css on the blog page.. css is being served by the litespeed plugin. Maybe cleaning out the cache and trying it again?

    Are you looking for some textual fun?

  • jbilohjbiloh Administrator
    edited June 2

    So by adding another in the footer it seems to have fixed the issue.

    Another question, any suggestions on how I can make the footer on LEB more responsive for mobile viewers?

    ^^ That's on desktop, which looks and works fine. However, on mobile, it's horrible.

    Jon Biloh
  • hoool123hoool123 Member

    @jbiloh said:
    So by adding another

    in the footer it seems to have fixed the issue.

    Another question, any suggestions on how I can make the footer on LEB more responsive for mobile viewers?

    ^^ That's on desktop, which looks and works fine. However, on mobile, it's horrible.

    Edit “@media” part in css if it’s exists

  • jbilohjbiloh Administrator

    @hoool123 said:

    @jbiloh said:
    So by adding another

    in the footer it seems to have fixed the issue.

    Another question, any suggestions on how I can make the footer on LEB more responsive for mobile viewers?

    ^^ That's on desktop, which looks and works fine. However, on mobile, it's horrible.

    Edit “@media” part in css if it’s exists

    Any suggestions on what here you would change?

    .block input{border:1px solid #888;}
    div.frontpage strong.title{display: none;}
    
    @media all and (min-width: 1024px) and (max-width: 1200px) {
    div.frontpage table.look_us tr td{padding-right: 17px !important;}
    
    }
    
    @media all and (min-width: 991px) and (max-width: 1200px) {
    div.frontpage{width: 96%;font-size: 87%;}
    .storycontent.tablelook table{font-size: 95%;}
    .storycontent.tablelook table ul.tableText.3gb-vps{width: 63%;margin: 0 auto;}
    table.look_us{width: 100%;display: block;}
    div.frontpage table.look_us tr th:last-child, div.frontpage table.look_us tr td:last-child{padding-right: 0;}
    div.frontpage table.look_us tr td{padding-right: 10px;}
    div.frontpage ul{margin: 0 0 5px 14px;}
    .storycontent.tablelook table{height: auto !important;font-size: 95%;line-height: 150%;width: 100%;}
    .storycontent.tablelook table ul{padding-left: 20px;}
    
    }
    
    @media all and (min-width: 768px) and (max-width: 991px) {
    div.frontpage{width: 96%;display: block;}
    div.storycontent.tablelook table, div.storycontent.tablelook table tr td, div.storycontent.tablelook table tbody, div.storycontent.tablelook table tbody tr, table.look_us , div.frontpage table.look_us tr td, div.frontpage table.look_us tbody, div.frontpage table.look_us tbody tr{width: 100%;display: block;}
    div.storycontent.tablelook table tr td p{text-align: left !important;}
    .storycontent.tablelook table{height: auto !important;font-size: 15px;line-height: 150%;width: 100%;}
    .storycontent.tablelook table ul{padding-left: 20px;}
    #description{padding: 0 25px 0 0;}
    div.frontpage th{display: none;}
    div.frontpage strong.title{display: block;}
    div.storycontent.tablelook img.screenshot{margin: 0 auto 10px;padding: 5px;display: block;max-width: 100%;float: none;}
    }
    
    
    
    @media (max-width:1024px){
        body{ padding:0 15px;}
        #nav-bar-wrap, #rap{ min-width:100%;  box-sizing: border-box;}
    }
    
    
    @media all and (min-width: 320px) and (max-width: 767px) {
        #content { margin: 25px 15px 0; box-sizing: border-box;}
        #menu { line-height: inherit; margin-left: 0; padding: 35px 25px; box-sizing: border-box; width: 100%;}
        #nav-bar li.first { border-radius: 20px 20px 0 0;}
        #nav-bar li{ padding:0; width:100%;box-sizing: border-box; background:#fff;}
        #nav-bar li.last{ border-radius:0;}
        #nav-bar{ margin-left:0; box-sizing: border-box; border-bottom: 3px solid #ddd;}
        #rap{border-radius: 0 0 20px 20px;}
        #nav-bar li a{ padding:12px 15px; display: block; text-decoration: none;}
        #nav-bar li.active { background-color: #006622; text-decoration: none; color: #fff;}
        #nav-bar li.active a { text-decoration:none; color: #fff;
    
        }
        .footimg a img {   width: 100% !important;}
    #header{margin: 10px 0 0 0;width: 100%;display: block;}
    #header a{display: block;text-align: center;}
    #description{margin: 0 auto;width: 95%;display: block;text-align: center;}
    div.frontpage th{display: none;}
    div.frontpage strong.title{display: block;}
    div.frontpage table.look_us td{width: 100%;display: block;padding: 0;}
    div.frontpage table.look_us td ul{width: 100%;display: block;margin: 0 0 10px 18px;}
    #wrap{display: block;}
    h2.storytitle{font-size: 18px;line-height: 23px;}
    div.meta{font-size: 94%;}
    div.storycontent.tablelook img.screenshot{margin: 0 auto 10px;padding: 5px;display: block;max-width: 100%;float: none;}
    div.storycontent.tablelook table, div.storycontent.tablelook table tr td, div.storycontent.tablelook table tbody, div.storycontent.tablelook table tbody tr, table.look_us , div.frontpage table.look_us tr td, div.frontpage table.look_us tbody, div.frontpage table.look_us tbody tr{width: 100%;display: block;    height: auto !important;}
    div.storycontent.tablelook table tr td p{text-align: left !important;}
    #menu img {max-width: 100%;display: block;margin: 10px auto 0;}
    
    Jon Biloh
  • hoool123hoool123 Member

    First I would suggest to set correct width for footer banners🙈

    Just set width: 100% for the div class and the issue should be fixed

  • jbilohjbiloh Administrator

    @hoool123 said:

    First I would suggest to set correct width for footer banners🙈

    Just set width: 100% for the div class and the issue should be fixed

    I see this in the CSS:

        }
        .footimg a img {   width: 100% !important;}
    

    And here is the footer code. What am I missing?

        <!-- begin footer -->
        </div>
      </div>
    
      <?php if (!is_404()) { get_sidebar(); } ?>
    </div>
    
    <?php if (!is_404()) { ?>
    <div id="footerads" class='footimg'>
      <div id="bsap_xyz" class="bsarocks bsap_xyz footimg"></div>
    </div>
    <?php } /* !is_404() */ ?>
    <div id="footer">
      2008-<?php echo date('Y'); ?> &copy; LowEndBox. Part of WNY IT Services, Inc. <br/>
    <!--Powered by <a href="http://wordpress.org/" target="_blank">WordPress</a>.  Generated in <?php timer_stop(1); ?> seconds. <a href="/feed/">RSS Feed</a><br/> -->
        <a href="https://lowendbox.com/about/">About LowEndBox</a> - <a href="https://lowendbox.com/category/editorial">Editorials & News</a> - <a href="https://lowendbox.com/category/interview">Interviews</a> - <a href="https://lowendbox.com/category/tutorials">Tutorials</a> - <a href="https://lowendbox.com/virtual-private-server-frequently-asked-questions-vps-faq/">VPS Frequently Asked Questions</a>
    
    <div style="font-size:85%;text-align:center;clear:both;"><a href="https://www.buysellads.com/buy/detail/12523?utm_source=shorturl&utm_medium=twitter&utm_campaign=selfpromote">Advertise on LowEndBox.com</a></div>
    <div style="font-size:85%;text-align:center;clear:both;"><a href="https://lowendbox.com/privacy-policy/">Privacy Policy</a> <a href="/feed/" target='_blank'>RSS</a> <a href="https://lowendbox.com/sitemap_index.xml" target='_blank'>Site Map</a>
    </div>
    
    </div>
    
    <?php wp_footer(); ?>
    
    </body>
    </html>
    
    Jon Biloh
  • SaragoldfarbSaragoldfarb Member
    edited June 2

    You're calling the same class (footimg) on both the parent and the child div.

    
      
    
    
    

    Set the size of the image to display, probably defined in #bsap_xyz, like:

    Max-width: 100%;
    Display: block:

    That should resize it to fit the parent.

    Or... :
    Width: inherit;

    May work... On mobile atm so can't go though all code but that's first that comes to mind.

    Doubt the image would still be readable once resized so better to use different ads for different screen sizes.

    I would create a child div that fits the parent and define the ad as a background image for each @media size then use:

    Background-size:contain:

    To make it fit.

    summerhosts.com - "behold, summer is coming".

  • ramesh_vishramesh_vish Member
    edited June 2

    Change

    } .footimg a img { width: 100% !important;}

    to

    } .footimg a img { max-width: 100% ;}

    This will make the image 100% within the container footimg. This seems to scale down well and is always 100% of the screen width.

    Regarding how to make the mobile experience better, it really depends on what you want to achieve. On the mobile view, the page seems to scroll down for ever. Things like the section "Virtual Private Server (VPS) Hosting FAQ" can be hidden from mobile.

    So many Wordpress themes boast of "Mega Menus", the whole section of "Looking for Cheap VPS Hosting, Dedicated Servers and Web Hosting?" can also be put under a menu.

    Are you looking for some textual fun?

  • jbilohjbiloh Administrator
    edited June 2

    @ramesh_vish said:
    Change

    } .footimg a img { width: 100% !important;}

    to

    } .footimg a img { max-width: 100% ;}

    This will make the image 100% within the container footimg. This seems to scale down well and is always 100% of the screen width.

    Regarding how to make the mobile experience better, it really depends on what you want to achieve. On the mobile view, the page seems to scroll down for ever. Things like the section "Virtual Private Server (VPS) Hosting FAQ" can be hidden from mobile.

    So many Wordpress themes boast of "Mega Menus", the whole section of "Looking for Cheap VPS Hosting, Dedicated Servers and Web Hosting?" can also be put under a menu.

    I changed it to:

    } 
        .footimg a img { max-width: 100% ;}
    

    And it doesn't seem to have had the intended impact. The footer is still way to wide for the view on mobile. Any other ideas? Am I doing something wrong?

    Jon Biloh
  • vovlervovler Member

    just try the one I sent you

    "They said it's RAID 5" - geekypixal

  • jbilohjbiloh Administrator

    @vovler said:
    just try the one I sent you

    Worked perfectly, can't thank you enough!

    Thanks to everyone who has helped so far!

    Thanked by 1Offshore_Solutions
    Jon Biloh
Sign In or Register to comment.