The 2.4.2 version of the Genesis theme framework introduced some important changes to the way pages are output on the front-end. When upgrading from Genesis 2.2.x (or later) to 2.4.2, there may be some visual issues on the front-end. This page explains how to fix this on your site.

 

An example of front-end styling issues after migrating from the 2.2.x version to 2.4.2.Same page after applying the fixes
  

 

What changed?

To understand how to fix the potential front-end issues, let’s first see an example of how the output structure changed between versions 2.2.x (or later) and 2.4.2.

Genesis versions 2.2.3 and 2.2.6 output the following main structure of the page:

On the other hand, Genesis version 2.4.2 outputs the following:

As you can see, the highlighted tags are completely new and were introduced with the version 2.4.2.

Please note that this is only one example of the changes you might experience after updating to the 2.4.2 version. There might be other structural and styling issues, but they solely depend on the (child) theme you use with Genesis, whether it’s a free, premium, or a custom one.

How to fix front-end issues after migrating to version 2.4.2

To fix the front-end issue after migrating to version 2.4.2 it is generally enough to add certain CSS corrections. You can add any of the additional CSS rules by going to the Toolset -> Layouts CSS and JS page and adding the code into the CSS editor tab.

To fix the front-end issues regarding the new output elements described above, add the following CSS rules.

Example of a CSS fix
.content-sidebar .site-inner {
  max-width: 100%;
}

.content-sidebar .content-sidebar-wrap {
  width: 100%;
}

.content {
  padding: inherit;
}

It is important to note here that in the above code, content-sidebar is the class of the parent element. As its name implies, it is only applied to pages with a sidebar. If your (child) theme features a template for a full-width page without a sidebar, you should use the full-width-content class instead.

In this case, you need to add the following CSS rules instead.

Example of CSS fix for full-width pages
.full-width-content .site-inner {
  max-width: 100% !important;
}
.full-width-content .content-sidebar-wrap {
  width: 100%;
}
 
.full-width-content .content {
  padding: inherit;
  width: 100%;
}

These classes are applied to the body tag and are based on your theme settings and the layout applied to the page.

What to do if these classes are not applied

Some child themes, for example, the ones based on Dynamik-Gen, override the general priority of the applied CSS rules. This can prevent the changes mentioned above from being applied on the front-end.

In this case, you need to enforce the added rules by applying the !important flag to them, as shown in the following example.

Example of CSS override
.content-sidebar .site-inner {

max-width: 100% !important;

}