1

I want to remove the main title ("KEZDŐLAP"), but only from the homepage, the 2 codes below works, except if I put the page-id code in front of them. Why might this happen?

.page-id-8178 .woocommerce-products-header__title{ display:none!important; }

.page-id-8178 .page-title{ display:none!important; }

Site: https://www.boltway.hu/

2 Answers 2

2

You can use home class in body tag to target homepage. Also avoid using !important for css. which is not a good practice.

try the following css:

body.home .woocommerce-products-header__title { display:none; }

body.home .page-title { display:none; } 
2
  • Thank you very much!
    – Italia
    Commented Dec 31, 2022 at 11:55
  • 1
    @Italia. If this answers your question, please consider marking it as the correct answer. It will helps others find it as resolved.
    – Irfan
    Commented Dec 31, 2022 at 13:23
0

It is possible that the CSS selectors with the .page-id-8178 class are being overridden by another CSS rule with a higher specificity. In CSS, the specificity of a rule determines which rule will take precedence when there are conflicting rules for the same element. Rules with higher specificity have a greater weight and will override rules with lower specificity.

One way to increase the specificity of your CSS selectors is to use the !important rule, as you have done in your code. However, this is not always the best solution, as it can make your CSS code more difficult to maintain and can cause other issues.

A better solution might be to use more specific CSS selectors that are less likely to be overridden by other rules. For example, you could try using a more specific selector such as .page-id-8178 .entry-title or .page-id-8178 h1.page-title, which targets the title specifically on the homepage with the ID 8178.

Alternatively, you could try using the :not() pseudo-class to exclude the homepage from the rule that is currently overriding your styles. For example:

:not(.page-id-8178) .woocommerce-products-header__title {
  display: none;
}
:not(.page-id-8178) .page-title {
  display: none;
}

This will apply the display: none rule to all elements with the woocommerce-products-header__title and page-title classes, except on the homepage with the ID 8178.

I hope this helps! Let me know if you have any further questions or need additional assistance.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.