WordPress causing template issues on Chrome

  • Resolved Snaacky

    (@snaacky)


    11 years, 10 months 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):
    https://i.imgur.com/HRsrwXQ.png

    How it looks (Chrome) (I wasn’t able to capture it all on one screenshot due to how big the space is):
    https://i.imgur.com/hIY6Oy4.png

    Website:
    https://www.leakcraft.com/news/

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter Snaacky

    (@snaacky)

    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.
    .container{margin-right:auto;margin-left:auto;}.container:before,.container:after{display:table;content:"";line-height:0;}

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter Snaacky

    (@snaacky)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter Snaacky

    (@snaacky)

    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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘WordPress causing template issues on Chrome’ is closed to new replies.