Front page section overlapping footer

[Rigo]

Hi Folks,
Got this problem on my front page - www.cmss.com.au - setup, one of the section spilling over the footer. I think it started happening when I added content to the section. The section appears to be a separate page (not sure) so I tried to optimise it for SEO.
The content of the excerpt is what is currently showing in the footer. If I delete the excerpt the lower part of the section content move down into that area.

Puzzling thing is why the excerpt is displaying locally, thought that was supposed to show up in SERP?
Wanted to add more content to this section but this issue cut it short.
Would be great to sort this one out with your help.
All suggestions really appreciated

 

[phaZed]

You're likely using WP, so the 'generated' HTML is different than your "builder app" but the problem is here:



The content is indeed being included in the div, within the Parallax slider. It's in the same div as the phone contact details.

PS - Cute house.. love the driveway.

 

[Rigo]

Thanks for spotting that out!
As I didn't manually enter this there, how did it get there?
Most importantly how do I get it out of there to where it's supposed to be?
And how to I correct what is creating this mess?
Yes, my site is WP based, I didn't do the development work on it but I've been doing re-adjustments + additions as the needs arise.
Thanks for helping phaZed.
That's the garage turned into office/workshop .

 

[phaZed]

Hard to say exactly how it got there. I am thinking that it's because the text for the section in question is not wrapped in H tags, like...
<H4>text</H4>

The rest of the site is wrapped like that, so that's likely it:


As for making that actually happen, you may have a Theme that includes a "Block Builder" - My theme uses "Fusion Builder" for its shortcode so it wants me to do something like the following:




Where I hit the "Add Block" plus-sign to pull up a "Paragraph" or "Heading", etc....

Yours may be different or simply using the WP back-end altogether.

If you're simply typing the text into the WP frontend without defining an 'element' - this is probably the cause of the issue. Try adding some H4 tags to that text.


Hit me up for a remote session if you want.. I know enough to be dangerous and I probably wont break anything, lol. I see it's like 12PM there at the time of this writing.. I'll be up for another 3-4 hours if it suits you.

 

[Rigo]

Hi Aaron,
Thanks for the offer to remote in.
I do use teamviewer, don't know what you use but we can have a go

 

[phaZed]

Well, update for everyone else - We got connected and his theme is a bit restrictive, but we managed to get it to work after a few tries

Turns out, the bottom SEO black text overlay was a feature of the theme that can't really be turned off... either it uses what you type in or it puts the first paragraph of the page, which is worse.

We ended up putting a period "." in for the text in that part as a compromise and simply added the SEO phrase OP wanted to the body, making the text white.

@Rigo I don't know if we hit that 500 error before getting rid of the <H4></H4> tags... get rid of those to get smaller text/space

 

[phaZed]

@Rigo, Take out that line in the "About" section, that we did, and put this instead, it will truly hide the text there...

<p style="color:#f4f4f4">CMSS Laptops All-in-Ones Desktops Macs Repairs all brands Parts &amp; Service Virus Removal Data Recovery Networking &amp; IT Support for Fast and Efficient Service – Home Users Small Businesses</p>

 

[Rigo]

@Rigo, Take out that line in the "About" section, that we did, and put this instead, it will truly hide the text there...

<p style="color:#f4f4f4">CMSS Laptops All-in-Ones Desktops Macs Repairs all brands Parts &amp; Service Virus Removal Data Recovery Networking &amp; IT Support for Fast and Efficient Service – Home Users Small Businesses</p>

Thanks for trying Aaron,
I've reverted things to like before as this is not the solution I'm really looking for.
As it is I can't add extra content to the section as it bleeds into the footer.
I believe I need to find a way to set the troublesome section to dynamically expand whilst shifting the footer so it doesn't overlap it.
It's looks like the footer is stuck and doesn't recede to allow for expansion of the section above.
Need to figure out how to release it.

 

[Your PCMD]

It would help if youd tell me where you want that text to be. If you'd want the text in the parallax box, then change:

<section class="parallax homepage_parallax" style=background-image:url(https://www.cmss.com.au/wp-content/uploads/2017/07/parallax.jpg)>

<div class=container>
<div class=row>

<div class=col-md-6>
CMSS ~ Laptops All-in-Ones Desktops Macs Repairs all brands Parts & Service Virus Removal Data Recovery Networking & IT Support for Fast and Efficient Service - Home Users Small Businesses.
</div>

<div class=col-md-6>
<div class=callboxfooter>
<h3>Call <a href="tel:0438 804 126" style=color:#fff>0438 804 126</a></br><a href="tel:03 8790 4460" style="color:#fff; padding-left: 80px;">03 8790 4460</a></h3>
<h4></strong>7 days a week From:</strong></h4>
<h4>Monday to Friday: 9am – 9pm</br>Saturday & Sunday: 9am – 7pm</h4>
</div>
</div>

</div>
</div>

</section>

Into this:

<section class="parallax homepage_parallax" style=background-image:url(https://www.cmss.com.au/wp-content/uploads/2017/07/parallax.jpg)>

<div class=container>
<div class=row>

<div class=col-md-6>
<div class=callboxfooter>
<p style="color:white">CMSS ~ Laptops All-in-Ones Desktops Macs Repairs all brands Parts & Service Virus Removal Data Recovery Networking & IT Support for Fast and Efficient Service - Home Users Small Businesses.</p>
</div>
</div>

<div class=col-md-6>
<div class=callboxfooter>
<h3>Call <a href="tel:0438 804 126" style=color:#fff>0438 804 126</a></br><a href="tel:03 8790 4460" style="color:#fff; padding-left: 80px;">03 8790 4460</a></h3>
<h4></strong>7 days a week From:</strong></h4>
<h4>Monday to Friday: 9am – 9pm</br>Saturday & Sunday: 9am – 7pm</h4>
</div>
</div>

</div>
</div>

</section>

 

[Rigo]

It would help if youd tell me where you want that text to be.

Hi Rob,
This text isn't actually supposed to show anywhere on the page as it is the content of the excerpt box. And if I delete it from the box, some of the bottom part of the page displayed in the About Us section spills over into the parallax area.
Could it be a case of incorrectly configured sectioning? Maybe the tagging is not right? Don't know as I'm extremely limited with these things ¯\_(ツ)_/¯

From the front-page.php I think this is what relates to the section in question:

<section class="about_section">
<div class="container">

<div class="row">
<div class="col-md-12">
<h2 class="text-center page_heading">About Us</h2>
<h5 style="color:blue;font-size:22px;padding: 3% 0%;" class="text-center"><b>Servicing Melbourne South Eastern and Eastern Suburbs since 2002</b></h5>
</div>
</div>
<div class="row">
<div class="col-md-6">
<?php echo get_the_post_thumbnail('7')?>

</div>

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

<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content-front', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>

</div>

</div>
</div>
</section>

Looks like Arabic to me (no offence to Arabs ) but I'm suspicious something might be amiss there.

 

[Your PCMD]

<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content-front', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>

Change that to this:

<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content-front', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
        // comments_template();
endif;
endwhile; // End of the loop.
?>

IF that doesnt work, add the following UNDER // comments_template();
<p>&nbsp;</p>

I'll add here that I don't use WP, many here will tell you my feelings for it. I understand though that a CMS is needed by many, many people. In those situations, I use CouchCMS. I mainly do my sites by hand, line by line. I know PHP/SQL (since the beginning) plus I use Visual Studio Code and I recommend it to anyone who may design websites.

 

[Rigo]

<p>&nbsp;</p>

Thanks for helping Rob.
That didn't work.
After adding the second bit I got"

and the page wouldn't load so I reverted out.
Did I insert it at the right spot?
Well, I'm no developer, only trying to handle these issues myself as I'm no longer in touch with the guy who first set it up for me.
The attraction to WP was from the marketing blurb that it's easy for non devs to do/edit it themselves. To some extent yes, but definitely not for total newbies who want to do deeper edits.
Appreciate your help

 

[Your PCMD]

Did I insert it at the right spot?

Yes. What is in the comments_template(); class?

My guess is that there is either a line in the SQL about comments but is empty, just the id(#) or there is an actual "comment". Without actually having the whole code we can only grasp at straws hoping something would work.

Try this:

<p style="opacity: 0;">
comments_template();
</p>

<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content-front', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
      <p style="opacity: 0;">
             comments_template();
      </p>
endif;
endwhile; // End of the loop.
?>

You can try different styles for the <p>

style="opacity: 0;"
style="visibility: hidden;"
style="display: none;"
style="text-ident: -9999px;"

You can also try changing the <p></p> to <div></div> or <span></span>

 

[Rigo]

<p style="opacity: 0;"> comments_template(); </p

I think it doesn't like this one too: