[Resolved] Weird Sudden Bug

[Caleb Carroll]

Yesterday, I opened my sites live view and noticed that the container seemed to be acting like it was set to a single container, so thinking I may hve just somehow changed that setting I quickly went into the customization options to change it back, however, it was already set to the separate containers. Regardless, I changed it to single, saved, then back to seperate and saved again just to see if it would update. Unfortunately nothing changed. This issue just happened and I have made no changes to the site except for adding additional pages and a few addons for custom block types.

This is what it looks like inside the customization options

And this is what it currently looks like on live

So something, appears to be pushing the blog post previews up above its container? Also a white background appears out of nowhere.

Here is my custom CSS incase there is something that causing this issue that I’m not seeing.

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
}

.site-header {
    position: relative;
    overflow: hidden;
}

.site-branding, .site-logo {
    position: relative;
    z-index: 1;
}

video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

hr {
width: 99%;
height: 1px;
margin-left: auto;
margin-right: auto;
background-color:#aeaeae;
color:#aeaeae;
margin-top: 5px;
margin-bottom:5px;
}

.widget  {
border: 1px solid #afafaf; 
  outline: 1px solid #dfdfde;
}

.widget-title {
	text-align: center }

.inside-article {
	border: 1px solid #afafaf; 
  outline: 1px solid #dfdfde;
	background-color: #cccccc;

}
.button,
.button:visited{
	display: inline-block;
	*display: inline;
	*zoom:1;
	padding: 3px 40px;
	font-size: 20px;
	border: 1px solid #00559e; 
  outline: 1px solid #3aa4ff;
}

.button.green,
.button.green:visited {
	background: #76B711;
	color: #FFF;
}

.button.green:hover {
	background: #67A00B;
}

.button.gray,
.button.gray:visited {
	background:#777;
	color:#FFF;
}

.button.gray:hover {
	background:#606060;
}

.button.blue,
.button.blue:visited {
		display: inline-block;
	*display: inline;
	*zoom:1;
	padding: 5px 15px;
	font-size: 20px;
	border: 1px solid #00559e; 
  outline: 1px solid #3aa4ff;
	background:#0273d4;
	color:#FFF;
}

.button.blue:hover {
		display: inline-block;
	*display: inline;
	*zoom:1;
	padding: 5px 15px;
	font-size: 20px;
	border: 1px solid #00559e; 
  outline: 1px solid #3aa4ff;
	background:#0057a2;
}

.main-navigation .main-nav ul li.esports a {
    background-image: url("http://thewarforge.net/wp-content/uploads/2018/12/b2w.png");
	color: #fdb300;
}

.main-navigation .main-nav ul li.esports a:hover {
    background-image: url("http://thewarforge.net/wp-content/uploads/2018/12/b2wr.png");
	color: #fdb300;
}

.main-navigation .main-nav ul li.hive a {
    background-image: url("http://thewarforge.net/wp-content/uploads/2018/12/hive.png");
	color: #c4fd00;
}

.main-navigation .main-nav ul li.hive a:hover {
    background-image: url("http://thewarforge.net/wp-content/uploads/2018/12/hive2.png");
	color: #c4fd00;
}

.herotitle
{
	color: Gold;
}

.hstr
{
	color: Red;
}

.hint
{
	color: Blue;
}

.hagi
{
	color: Green;
}

.herotext
{
	color: White;
}

.hcspell
{
	color: White;
}

.sba
{
	background-color: #9ec1ff;
	border: 1px solid #e3edff; 
  outline: 1px solid #0b1c3a;
}

[Tom]

Hmm, the one-container class is being used on your site.

Any caching plugins?

[Caleb Carroll]

Not that I’m aware of. This is list of plugins not all are active, however.

Category Tag Pages
Adds categories and tags functionality for your pages.

Code Snippets
An easy, clean and simple way to add code snippets to your site. No need to edit to your theme’s functions.php file again!

Editor Blocks for Gutenberg
A unique collection of Gutenberg blocks.

Enhanced Media Library
This plugin will be handy for those who need to manage a lot of media files.

GhostKit
Blocks collection and extensions for Gutenberg

GP Premium
The entire collection of GeneratePress premium modules.

Image Map Pro
The most advanced image map builder for WordPress

Jetpack by WordPress.com
Bring the power of the WordPress.com cloud to your self-hosted WordPress. Jetpack enables you to connect your blog to a WordPress.com account to use the powerful features normally only available to WordPress.com users.

Lightweight Social Icons
Add simple icon font social media buttons. Choose the order, colors, size and more for 42 different icons!

Menu Image
Provide uploading images to menu item

OAuth Client
OAuth Login plugin allows login with your Strava, FitBit, Slack, Discord, Custom OAuth server, Openid Connect provider

Post Sliders and Grids
Post Sliders and Grids is beautiful responsive post thumbnail image slider as well as post grid.It support post exclusion,Categort exclusion and also support custom post type.

Stackable – Gutenberg Blocks
Essential Gutenberg blocks in one plugin. Simple, flexible, and customizable.

Stylist
Simple yet powerful visual style editor.

TablePress
Embed beautiful and feature-rich tables into your posts and pages, without having to write code.

TablePress Extension: Row Filtering
Extension for TablePress to filter table rows by using additional Shortcode parameters

Tooltip CK
Tooltip CK allows you to put some nice tooltip effects into your content. Example : {tooltip}Text to hover{end-text}a friendly little boy{end-tooltip}

Widget Shortcode
Deactivate

[Caleb Carroll]

So this is only happening on the front page, content on all other pages is unaffected.

[Tom]

Do you have any custom functions on the site? In Code Snippets perhaps?

[Caleb Carroll]

This first one is the most likely candidate however it has been running for quite awhile with no issues, maybe the update effected it?

add_filter( 'body_class', 'ivan_body_class', 100, 2 );
function ivan_body_class( $wp_classes, $extra_classes )
{
	$wp_classes[] = 'one-container';
	if ( is_front_page() ) {
		$wp_classes = array_diff( $wp_classes, array( 'separate-containers' ) );
	} else {
		$wp_classes = array_diff( $wp_classes, array( 'one-container' ) );
	}

    // Add the extra classes back untouched
    return array_merge( $wp_classes, (array) $extra_classes );
}

And this is the only other snippet.

add_filter( 'generate_start_widget_title','tu_add_span_widget_title' );
function tu_add_span_widget_title()
{
      return '<div class="widget-title"><span>';
}

add_filter( 'generate_end_widget_title','tu_add_span_widget_title_end' );
function tu_add_span_widget_title_end()
{
      return '</span></div>';
}

[Tom]

So that first function – what was its purpose? It looks like it’s supposed to set the front page to one container while keeping the others separate.

If you don’t need that functionality, you can remove the function.

Let me know 🙂

[Caleb Carroll]

Removing that did fix it, broke some other stuff but altered it in another fashion, so all is working properly again now.

Kudos

[Tom]

Great to hear 🙂

[Author]

Posts