The issue comes from the CSS used for the videos tab.
#pills-videos {
display: flex;
flex-wrap: wrap;
}
The problem is that the tab needs display: none
so that it is hidden when not in focus but is being overridden with display: flex
from the custom CSS you or someone added. The reason why this hasn’t been noticed previously is that the video tab was the last on the markup of the entire tab container. Now that you added a reviews tab, in the HTML markup, it is added after the video tab even though in the tab navigation reviews link is not last.
With display flex being used on the video tab, it is then never hidden when not in focus. You can see this happen with any of the first four tabs as the extra white space is below their content.
I understand why you’re using display flex on the videos so that you can have them float left into a column layout. However, you would need to do that on an inner div of the tab container so that it doesn’t affect the tab itself as it requires display: none
and display: block
.
If you’re not able to wrap the videos in an inner div and use that for display flex then you should adjust the custom CSS to this so that it only targets that tab when it is active.
#pills-videos.active {
display: flex;
flex-wrap: wrap;
}