Blog header/secondary header size and name

Shapely
1

Hi,
Sorry if the answer has already been given here but I have been looking for a few hours and can’t find anything.

I am trying to:

  • make the blog header different for each category, the plugin Unique headers seems ok for that.
  • remove the title/name of the category → can’t find it in the code… (yellow zone in attachment)
  • change the size of the image as I would it to be smaller → can’t find either

In case you need to have a look, I am working on these category page : https://laboutiqueiberique.com/index.php/categorie-produit/jambon/jambon_pn/

Thanks a lot for your work on the theme and thanks in advance for you answers.

Gaëtan

2

Hi,
I finally foud a way to do it!!

Hereafter the code I used :

/Header height/
.page-title-section {
height: 100px !important;
}

/Remove title/
.page-title {
display: none;
}

.page-title-section bg-secondary {
display: none;
}

Thanks anyway, have a great day!

3

Hello there,

I hope you are doing well today.

  1. Using that plugin is a great option otherwise the code of the theme would need to be changed by a third party developer.

  2. You can use the following CSS code to remove the header callout by going to Appearance > Customize > Additional CSS and pasting it there.


.header-callout {
    display: none;
}
  1. You need to go to WooCommerce > Settings > Products > Display > Product Images and change the image size there.

Best Regards,
Support

4

Hi,

Thanks for your answers.

About the header callout, I didn’t want to remove it but make it smaller and delete the name of the category.

I managed to do it as you can see in the screenshot attached.

I have another issue now, it works perfectly on a computer but the image does not fit on another device, phone or tablet, as you can see on screenshot 2.

Would you have a trick to fix it?

Thanks again.

Gaëtan

5

Hello there,

Please try the following :


/*Reduce header size on mobile*/
@media (max-width: 767px)
{
.page-title-section {
    height: 31px !important;
    background-size: contain;
    background-repeat: no-repeat;
}
}

@media (max-width: 767px)
{
.page-title-section {
    padding: 0px;
}
}

Best Regards,
Support

6

Great!!
Thanks a lot

7

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support