Add the same banner as on the blog page, on the category page

Hey laboiteapixels12,
Thank you for the login to your site, but it is not an admin login so I was limited.
I see that on your category pages you are displaying the category description and I assume that you would like this as the title in the banner image like the blog page is displayed.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_category_banner() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
  $('#top.archive.category').each(function() {
  	var catTitle = $('.category-term-description p').text();
  	var catBanner = $('<div class="avia-section avia-full-stretch fullsize cat-banner"><div class="av-section-color-overlay-wrap"><div class="av-section-color-overlay"></div></div><h1>'+ catTitle +'</h1></div>');
  	$(catBanner).insertBefore('.container_wrap_first');
});
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_category_banner');

Please copy the code from the forum and not from an email notification so the symbols are copied correctly.
Then add this css to your child theme stylesheet or the theme option Quick CSS:

.avia-section.cat-banner {
	height: 283px;
	color: #fff;
    background-color: #f7f4ef;
    background-image: url(https://jean-michel-cosson.fr/wp-content/uploads/2022/10/blog-articles-par-jean-michel-cosson-3.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: scroll;
}
.avia-section.cat-banner h1 {
  margin: 0;
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.avia-section.cat-banner .av-section-color-overlay {
    opacity: 0.4;
    background-color: #2b2b2b;
    height: 283px;
}
#top.archive.category .category-term-description {
	display: none;
}

This is the expected results:

Best regards,
Mike

Hi,
I didn’t make any changes to your site, the login you posted is not an admin login so I’m unable to see or modify any theme setting or WordPress settings, I didn’t even look at your homepage. From what I can see, from the Dev Tools, is the height of the element is changed from the 100vh (951px) which is the setting in the element, to 738px, but I can’t tell if it is custom css or a custom script.
Try disabling your custom css and any scripts and your plugins, if this doesn’t help upgrade the login you post to admin so we can investigate.

Best regards,
Mike

Hi,
Thanks for the login, I don’t know where this is coming from but I added this css to correct and it seems to be working:

#top.home #av_section_1 {
	height: 85.78vh;
}

please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad to hear to make the category archive columns two wide for tablet try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_archive_category_article_width() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
  $('#top.archive.category .slide-entry-wrap').each(function() {
  	var width = $(window).width();
  if ((width <= 989)) {
  	$('.slide-entry').removeClass('av_one_third').addClass('av_one_half');
  } else {}
});
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_archive_category_article_width');

the expected results:

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike