Category page title height

Hello,

This is regarding the shop category page title height –

In the Custom CSS area, i gave a padding like this:

.page-title-default{
    padding-top: 120px;
    padding-bottom: 120px;
}

However, when i visit the shop page and click around different categories, sometimes the category image title area only give a padding of 60px (instead of 120px). Upon checking inspector, there is a code like this:

@media (min-width: 1025px)
<style>
.title-size-default {
    padding: 60px 0;
}

Once i click refresh or click the same category a few times, the page will refresh with a padding of 120px for the category / page title image area.

I find this a little strange, and would like to ask where can i disable the code:

@media (min-width: 1025px)
<style>
.title-size-default {
    padding: 60px 0;
}

Try to go to “http://146.190.105.10/shop/”, and the first time you see, you may see there is a padding of 120px top and bottom. Then you try to refresh the page once, or click around other categories. You will notice that the height of the category image area changes to “padding: 60px 0”. Then after another few clicking or refreshing, it changes back to “120px” again. (See attached screen record).

Thanks!

Attachments:

You must be logged in to view attached files.

Hello,

Please, try to add the !important value for each property: https://prnt.sc/uDgjCEULA5e9

Then clear the cache and recheck the issue.

Kind Regards

Hello Luke,

Would like to better understand, is this code:

@media (min-width: 1025px)
<style>
.title-size-default {
    padding: 60px 0;
}

part of the theme’s default CSS?

Thus, if i want to have a custom padding, i have to add !important to my custom property?

If the above is correct, is there any way to remove

@media (min-width: 1025px)
<style>
.title-size-default {
    padding: 60px 0;
}

, so it does not load styling for the same area twice?

Thank you

Hello,

That theme’s code comes from the “Page title size” option (Theme Settings -> Page title), therefore you can just rewrite that code by using the title-size-default selector instead of page-title-default or use the important value for your own code to make work your own code.

In general, I suggest you use the below code for increasing the height of the Page title, also you should past it into the “Desktop CSS” area in Theme Settings -> Custom CSS.

.archive .title-size-default {
	padding: 120px 0;
}

So the current default code will be overridden: https://monosnap.com/file/fCZTdJuPuvzzkglmpoaHRGyqqBSkdV

Kind Regards

Hi Luke, thanks.. I think we are getting closer..

I tried your suggestion, and notice that this applies specifically to shop archive pages only. However, on other pages that has “page titles”, the image height is still “padding: 60px 0;”. And the inspector is still showing:

@media (min-width: 1025px)
<style>
.title-size-default {
    padding: 60px 0;
}

for the other pages that has page titles with images.

How can we make it consistent across the different pages?

Hello,

I apologize for the delay.

Yes, the above code that is shared by me works on the shop archive pages only. If you want to make such padding globally, try to use the code below.

body .title-size-default {
	padding: 120px 0;
}

If you would like to discuss the issue further, our customer support team is here for you.

Kind Regards

[Author]

Posts