[Resolved] Genesis and Child Themes Toolset Blocks and Archive Issues

[Author]

Posts

[cristianR-3]

I am trying to: Use the Blocks Archive

Link to a page where the issue can be seen:

I expected to see: The Blocks Wrapper centered on the page

Instead, I got: hidden link

[cristianR-3]

I want to add that I have been using Genesis/Toolset for a very long time. But ever since the Blocks Plugin was released, I have had issues working the Archives. I always need to do a lot of extra work to get the Archive to center on the page. When using WooCommerce, I have had to install a Layout plugin to control the centering of the products shop page.

Additionally, working on the Archive Blocks implementation is hard. If I attempt to use a Columns Block within the Archive Loop, it is tough to place any item inside the individual columns.

This is not a production website. I made this install to help troubleshoot these issues and maybe implement a permanent fix.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

During troubleshooting, I noticed that this CSS code from the Mai Engine plugin is responsible for this misalignment on the archive pages:
( file: /wp-content/plugins/mai-engine/assets/css/main.min.css )

.entries-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: var(--align-columns-vertical,unset);
    justify-content: var(--align-columns);
    width: calc(100% + var(--column-gap));
    max-width: var(--entries-wrap-max-width,calc(100% + var(--column-gap)));
    margin: calc(var(--row-gap) * -1) 0 0 calc(var(--column-gap) * -1);
    --entry-margin: var(--row-gap) 0 0 var(--column-gap);
}

Theme designers can choose to adopt their own design and style choices, which is why there can't be a generic/global fix for conflicts like this one. Some custom CSS code will be needed to overcome them, on case to case basis.

For example, you can include the following CSS code in your Toolset WordPress Archives when using this plugin, to make sure that the internal container is properly centered:

.content .entries-wrap {
    display: block;
}

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[cristianR-3]

My issue is resolved now. Thank you!