[Resolved] My theme covers the content created by the toolset content template

[Author]

Posts

[sorinR]

I am trying to see this page:
hidden link

It's the archive of a taxonomy of a custom post type.

The content displays for a second and then the footer covers it up. It leaves only the description on the screen.

If I go into the page source, I see the content that should be displayed.

<div class="itemList">
       
                                                               
                   <div class="row-fluid">					
                   <h3><a href="<em><u>hidden link</u></em>" target="_blank">You Are The Reason &#8211; Calum Scott, Leona Lewis</a></h3><a href="<em><u>hidden link</u></em>" target="_blank"><img src="<em><u>hidden link</u></em>" class="attachment-full aligncenter" /></a>                  					

          
                     
                   <h3><a href="<em><u>hidden link</u></em>" target="_blank">Voi Fi Acolo &#8211; Robert Toma</a></h3><a href="<em><u>hidden link</u></em>" target="_blank"><img src="<em><u>hidden link</u></em>" class="attachment-full aligncenter" /></a>                  								                  
          
         
                   <h3><a href="<em><u>hidden link</u></em>" target="_blank">Pentru Totdeauna &#8211; Trupa Zero feat. Evelyn</a></h3><a href="<em><u>hidden link</u></em>" target="_blank"><img src="<em><u>hidden link</u></em>" class="attachment-full aligncenter" /></a>                  					
					</div>
                  
          
                                                               
                   <div class="row-fluid">					
                   <h3><a href="<em><u>hidden link</u></em>" target="_blank">Povestea Noastră &#8211; Claudia Pătrăscanu</a></h3><a href="<em><u>hidden link</u></em>" target="_blank"><img src="<em><u>hidden link</u></em>" class="attachment-full aligncenter" /></a>                  					

          
                     
                   <h3><a href="<em><u>hidden link</u></em>" target="_blank">Perfect Symphony &#8211; Ed Sheeran & Andrea Bocelli</a></h3><a href="<em><u>hidden link</u></em>" target="_blank"><img src="<em><u>hidden link</u></em>" class="attachment-full aligncenter" /></a>                  								                  
          
         
                   <h3><a href="<em><u>hidden link</u></em>" target="_blank">Am Știut &#8211; Direcția 5</a></h3><a href="<em><u>hidden link</u></em>" target="_blank"><img src="<em><u>hidden link</u></em>" class="attachment-full aligncenter" /></a>                  					
					</div>
                  
          
                                                               
                   <div class="row-fluid">					
                   <h3><a href="<em><u>hidden link</u></em>" target="_blank">Vals &#8211; Smiley & Feli</a></h3><a href="<em><u>hidden link</u></em>" target="_blank"><img src="<em><u>hidden link</u></em>" class="attachment-full aligncenter" /></a>                  					

          
                     
                   <h3><a href="<em><u>hidden link</u></em>" target="_blank">Perfect Duet &#8211; Ed Sheeran, Beyoncé</a></h3><a href="<em><u>hidden link</u></em>" target="_blank"><img src="<em><u>hidden link</u></em>" class="attachment-full aligncenter" /></a>                  								                  
          
         
                   <h3><a href="<em><u>hidden link</u></em>" target="_blank">Dear Future Husband &#8211; Meghan Trainor</a></h3><a href="<em><u>hidden link</u></em>" target="_blank"><img src="<em><u>hidden link</u></em>" class="attachment-full aligncenter" /></a>                  					
					</div>
                  
          
</div>

What do you think it's the problem?

[Christian Cox]

Hello, it looks like a theme or plugin conflict is hiding the main contents of the archive by setting its height to 0px for some reason (see the screenshot for technical details). I can see that the Isotope library is loaded here, so I suspect that Kallyas or one of the plugins installed on your site implements the Isotope effect in its archives. You can see the Isotope effect here if you click one of the filter or sort buttons "show all", "metal", etc: https://isotope.metafizzy.co/

I see you reported a similar issue several years ago, but found no real solution:
https://toolset.com/forums/topic/the-footer-of-the-kallyas-theme-covers-up-the-taxonomy-peges-content/

Do you know if the Isotope effect is added by the theme, another plugin, or by some custom code you have implemented for another area of the site? If you do not know, we can try to determine how it is added. As a test, disable all 3rd-party plugins except Toolset. If the problem still occurs in this test, then it is most likely that Isotope is loaded by the Kallyas theme. If Kallyas offers an option in the theme settings to disable the Isotope effect on archives, that might solve the problem. If they do not offer such an option or if you are not sure, you might ask their support team. If it's not clear or you are unable to get their assistance, we might be able to find a CSS workaround.

[sorinR]

Hi, Christian

Thank you for the support.

I have disabled all the plugins except the toolset ones. The issues still remains.
So it's the Kallyas theme.

I searched in the them options the isotope settings. I couldn't find them.

Can we try to find the CSS work around?

[Shane]

Hi Sorin,

Christian is currently out sick today but should be back tomorrow to continue assisting.

You should get a response from him or another supporter tomorrow should he be out again tomorrow sick.

Thank you for your continued patience on this one.

Thanks,
Shane

[Christian Cox]

Hello, you can try adding this CSS to your archive's CSS editor, or to your Appearance > Customize > Additional CSS panel. This should override the theme's isotope height setting in all the Versuri taxonomy archive pages:

.archive.tax-versuri .itemListView > .itemList
{
  height:auto !important;
}

You can use this as a template for other archives as well, you would have to replace the CSS class .tax-versuri as needed, to target those archives by CSS class and slug.

[sorinR]

Hi,

I did what you said, and it works.

But there's a problem.

We have hundreds of such archives.

For example this page hidden link
Should show us all the songs sang by Megan Trainor which are ok for a wedding dance.
And we have hundreds of artists there.

Isn't there a css work around that will solve the problem for all the archives at once?

[Christian Cox]

You can try removing the taxonomy-specific class like this:

.archive .itemListView > .itemList
{
  height:auto !important;
}

That removes the limitation based on the taxonomy slug. My concern is that it will be too generic, and cause problems on other non-taxonomy archive pages. You can try it and see. If it breaks other archives, you can revert that change and target each of your custom taxonomies by slug/class like .tax-versuri, .tax-artist-formatie, .tax-taxonomyslug, etc., in this format:

.archive.tax-versuri .itemListView > .itemList, .archive.tax-artist-formatie .itemListView > .itemList, .archive.tax-taxonomyslug .itemListView > .itemList
{
  height:auto !important;
}

The example code above will apply the changes to all versuri taxonomy archives and all artist-formatie taxonomy archives and all taxonomyslug taxonomy archives. If there are other taxonomy archives you want to fix, you can copy and paste the comma-separated selector below as many times as needed to target all the taxonomy archives by taxonomy slug and CSS class:

, .archive.tax-taxonomyslug .itemListView > .itemList

Replace taxonomyslug with the archive taxonomy slug where you want to apply this fix.