[Resolved] WordPress Archives template missing required CSS

[Author]

Posts

[Alok Sharma]

Hi,

As I am developing a site, I came across two issues that are directly related to the Toolset Blocks plugin. The following CSS is missing from WordPress Archives template and needs to be added manually.

In my case, I have five CPT's, so I had to add a CSS class in all the five WordPress Archives, twice, one for the WordPress Archive block and the other in the Container block.

1) The CSS required to display the full-width container is missing. However, this CSS is present in the Content Templates. I figured it out when I added a container & set it to full-width in both WordPress Archives and Content Templates. The full-width container was working in Content Templates, but not in WordPress Archives.

I added a CSS class in the container block and then added the following CSS in the theme's CSS.

/* Toolset Blocks Container Full-width */
.tb-container.alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	width: auto;
}

@media only screen and (max-width: 599px) {
	.tb-container.alignfull {
		max-width: 100vw !important;
	}
}

@media only screen and (min-width: 781px) {
	.tb-container.alignfull {
		max-width: calc(100vw - 8px) !important;
	}
}

The detail are also mentioned in https://toolset.com/forums/topic/container-full-width-not-working-in-generatepress-premium/

2) Left & right content body padding is missing. I noticed this when I loaded the site on my mobile phone and there was no padding. I then used the developer tools and noticed that left & right padding is not at all present. However, this is not the case with Content Templates, as the content body padding is already present.

I then added the CSS class in the WordPress Archive block and the following CSS is theme's CSS:

/* Toolset WordPress Archive Content */
.wordpress-archive-content {
	padding: 0 20px;
}

It would be much appreciated if these changes are hard-coded in the Toolset Blocks plugin so that your customers do not have to go around figuring out what could be wrong or contact support.

[Waqar]

Hi,

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

The Toolset plugins carefully include only the bare minimum styles so that the main control of the overall look and feel of the styles is inherited from the active theme.

1. In one of the CSS files from the GeneratePress theme ( /wp-content/themes/generatepress/assets/css/main.min.css ), you'll find this code which is responsible for making the content show in full-width:

.no-sidebar .entry-content .alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
}

But when a Toolset WordPress Archive is used, there is no container that includes the class "entry-content", which is why these styles from the theme have no effect.

To fix this, without any custom CSS code, you can add the class "entry-content" into the main "WordPress Archive" block's "CSS Classes" field under the "Advanced" tab.
( screenshot: hidden link )

As different themes can design the structure of their CSS code in their own way, it is not possible for Toolset to include built-in styles to counter/adjust for each theme, or force its own styles over the theme's styles which will result in even more conflicts. This is why adjustments like these need to be handled on a case-to-case basis.

2. The same is true for the padding and margins for the WordPress Archives containers. If Toolset includes built-in styles for them, it will affect the users who'd want their archive container to show full-width and control the padding and margins at the individual result item level.

For someone who needs to wrap the archive's container with some padding or margin, custom CSS code, or "Style Settings" in the "WordPress Archive Loop" block can be used.
( screenshot: hidden link )

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

regards,
Waqar

[Alok Sharma]

Hi Waqar,

I don't have much to say, except:

1. When we set the container to full-width, ain't it supposed to automatically add or use the necessary CSS?

2. The issue is not with the Content Templates, but WordPress Archives only. Either it should have been in both or none.

Anyway, I am just an end-user and thought to highlight these core issues.

[Alok Sharma]

Hi Waqar,

Just FYI, I tried this with Astra theme and had the same results. There is definitely something wrong with the WordPress Archives. In short, it is not even respecting the theme's default CSS classes that is supposed to provide a 20px padding on the left & the right.

You can try it at your end and see it for yourself.

I am surprised that how come other users haven't encountered this problem, and if they have, they might have fixed it on their own just like I did.

[Waqar]

Thanks for writing back and for sharing your feedback.

I've performed some tests with the Astra theme as well and just as the GeneratePress theme, its block alignment styles for example "alignfull" styles are also dependant on the container class "entry-content".
(so the fix shared in point 1 from my last reply should work with Astra theme too)

I'll pass on your feedback internally, but, if you'll test the WordPress Archive with a default theme like Twenty Twenty-One or Twenty Twenty, you'll see that its block alignment styles are not dependant on the "entry-content" class, and so you won't have to include it manually in the block's settings.

[Alok Sharma]

Hi Waqar,

I reverted to GeneratePress as that is what I primarily use and also added "entry-content" class in WordPress Archive block, and it fixed both the issues, i) Toolset Container block full-width layout, and ii)left & right padding.

I also noticed that "entry-content" class is already present in Content Templates and hence it works out-of-the-box.

It should be noted that almost all the body contents rely on "entry-content" class and hence it should be included by default in Toolset WordPress Archives, just like in Content Templates.

As for the WordPress default themes, you know that they serve no good purpose, especially when designing a website with dynamic contents. They are good for very basic purposes like blogs etc, but not for dynamic sites.

You may please close the ticket if no further interaction is required, as you have already passed on the details to the developers.

Thanks.

[Waqar]

Thank you and I'm going to mark this ticket as resolved.

You're welcome to start a new one for each new question or concern.