[resolved] WordPress causing template issues on Chrome (7 posts)

  1. Snaacky
    Posted 3 years ago #

    I have a WordPress blog and some PHP based pages that both run off of the CSS and header and footers provided from WordPress.

    On Chrome, if you scroll down the page, you'll quickly encounter an enormous white gap before you reach the footer. The footer is also extremely expanded. You'll notice these issues quickly on the WordPress section of my website.

    Here's the issue though, the other non-WordPress pages using the same CSS, AND WordPress's header and footers don't have this issue, on any browser. However on WordPress using the Chrome browser this issue occurs?

    How it is supposed to look (non-Chrome):

    How it looks (Chrome) (I wasn't able to capture it all on one screenshot due to how big the space is):


    Could somebody shed some light on how to fix this? I am absolutely stumped.

  2. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    I'd first remove all instances of height: 100%; or min-height: 100%; styles to check whether any could be responsible.

  3. Snaacky
    Posted 3 years ago #

    I removed all instances of min-height: 100% and height: 100% in style.css, and it didn't fix anything. The site still remains the same. I however did notice using Inspect Element on Chrome that max-height: 100% exists in bootstrap.min.css.

    This is what Chrome says exists on that line.
    .container{min-height:100%; margin-right:auto;margin-left:auto;*zoom:1;}.container:before,.container:after{display:table;content:"";line-height:0;}

    This is what actually exists on that line.

    EDIT: I just tried replacing boostrap.min.css. The error still occurs, and the line still appears on Chrome's 'Inspect Element' however the code still doesn't exist in the actual file.

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Make sure you're using a DOCTYPE at line 1 of your header.php file.

  5. Snaacky
    Posted 3 years ago #

    Added <!DOCTYPE html> to the top of my header.php file. The issue still is occurring.

  6. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    It's not at line 1. Right click on your webpage and select 'view source'. Look at the that line.

  7. Snaacky
    Posted 3 years ago #

    Aha! Fixed my issue. For some odd reason, I made the CSS import on both header.php and index.php. So that was the reason why it was not at line 1. The issue is now fixed. Thanks for being such a great helper!

Topic Closed

This topic has been closed to new replies.

About this Topic