Reducing header on category page

[Maria Gonzalez]

Hi,

on the classic theme, on the category page, the header where the name of the category is written is too height! How can I reduce it? Also I'll to center the category name on the header..

[webprog]

Hello, you can use theme.css file of the theme: themes/classic/assets/css/theme.css

.block-category h1

 

[Prestashop Addict]

Hi,

in theme.css change to

.block-category h1 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  text-align: center;
}

 

[Maria Gonzalez]

11 minutes ago, Prestashop Addict said:

Hi,

in theme.css change to

.block-category h1 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  text-align: center;
}

 

Thanks! That solved the alignment issue, however in that h1 tag I do not see anything referring to height or width of the block...

[webprog]

3 minutes ago, Maria Gonzalez said:

Thanks! That solved the alignment issue, however in that h1 tag I do not see anything referring to height or width of the block...

You can use font-size property for height.

Or add height and width properties to the body of the block:

.block-category h1 {
  margin-bottom: 1rem;
  font-size: 1rem;
  text-align: center;
width:100px;
height:10px;
}

 

[Prestashop Addict]

il y a 13 minutes, Maria Gonzalez a dit :

Thanks! That solved the alignment issue, however in that h1 tag I do not see anything referring to height or width of the block...

What do you mean by height and width. If you put fixed value, you'll have display issues on small devices 😞 

[Maria Gonzalez]

8 minutes ago, webprog said:

You can use font-size property for height.

Or add height and width properties to the body of the block:

.block-category h1 {
  margin-bottom: 1rem;
  font-size: 1rem;
  text-align: center;
width:100px;
height:10px;
}

 

Height seems to not affect the block...

[Prestashop Addict]

il y a 3 minutes, Maria Gonzalez a dit :

Height seems to not affect the block...

Ok try

.block-category {
  min-height: 3.75rem;
  margin-bottom: 1.563rem;
}

 

[Maria Gonzalez]

3 minutes ago, Prestashop Addict said:

Ok try

.block-category {
  min-height: 3.75rem;
  margin-bottom: 1.563rem;
}

 

That worked ! Thanks!

[Prestashop Addict]

You're welcome, don't forget to add [SOLVED] to your subject 😉

[JBW]

Don't change theme.css directly, you will loose all your changes with next upgrade. Rather use custom.css