Return to previous page

XStore breadcrumbs H1 title size overridden by other css

This topic has 6 replies, 2 voices, and was last updated 5 years, 5 months ago ago by Olga Barlow

Robert

Participant

November 20, 2018 at 00:10
Hello

I have already posted problems with header breadcrumbs padding settings ni XStore Theme Options not working in XStore 5.x. I am now seeing that when I set the breadcrumbs H1 title font size to Font Size: 40px, Line Height 46px in XStore Theme Options, the font displayed it different to what I expect. In Google Chrome, I use the ‘Inspect’ tool to see what is overriding it and see this:
```
.woocommerce-wishlist .page-heading .title, .woocommerce-account .page-heading .title {
    display: block;
    font-size: 1.7rem !important;
    text-transform: uppercase !important;
    text-align: center;
}
```
What is generating that css? because it’s not in my custom css? Something very wrong with XStore 5.x styling. Header settings are being overriden by something elsewhere not seen in Theme Options.

Regards
#204189 Copied Theme version: 5.1.1
5 Answers

Olga Barlow

Support staff

November 20, 2018 at 13:47

Hello,

These styles come from theme style.css. If you check our demo you’ll see that breadcrumbs on My account, Wishlist, Cart, Checkout pages have special styles. You can overwrite them using custom CSS. I’ll pass your request to our developers, maybe they will be able to apply styles without !important to allow users to overwrite styles via Theme Options.

Regards

#204239 Copied

Robert

Participant

November 20, 2018 at 13:53

Please also inform the developers that breadcrumbs padding settings in Theme options also do not work and are overridden by other styles. I mentioned this before, corrected it with custom.css and after an update it not working again.

If you have theme options that we can set, they should work. Since XStore 5.beta onwards, they do not work. Despite me bringing the breadcrumbs padding issue to your attention before its still not been fixed after several updates.

Regards

#204240 Copied

Olga Barlow

Support staff

November 20, 2018 at 18:04

Hello,

Are you talking about padding for these special pages – My account, Cart, Checkout, Wishlist – or about all the pages? Because I don’t see problem with breadcrumbs paddings for simple pages.

Also, you can disable the special styles for the cart, checkout etc pages in Theme options http://prntscr.com/lks6km

Regards

#204263 Copied
Robert

Participant

November 20, 2018 at 20:06
Thanks

Disabling the ‘Special breadcrumbs on cart, checkout, order page’ ensures that the breadcrumbs are displayed. However, the breadcrumbs padding is still different from the padding on the Shop page and News page (Blog) to other pages. The cart is the same as other standard pages but Blog and Shop different in terms of breadcrumbs padding. They have the expected padding of 3.14em and other pages are much thinner top and bottom padding.

H1 TITLE PROBLEMS

The H1 title on Shop page is still different to my About Us page and Contact pages. The Shop page has expected font/size/weight. The About Us page has a smaller size. The Contact Page appears to have a different font face and weight. Not sure why they should be different?

For example, on the Contact Page the page title in the breadcrumbs area should be h1.title:-
```
.page-heading.bc-type-left2 .title, .page-heading.bc-type-left .title, .page-heading.bc-type-default .title, [class*=" paged-"] .page-heading .span-title:last-of-type, [class*=" paged-"] .page-heading.bc-type-left2 .span-title:last-of-type, .single-post .page-heading.bc-type-left2 #breadcrumb a:last-of-type, .bbp-breadcrumb-current {
    line-height: 46px;
    font-size: 40px;
}
```
but is being overridden by this:-
```
.woocommerce-wishlist .page-heading .title, .woocommerce-account .page-heading .title {
    display: block;
    font-size: 1.7rem!important;
    text-transform: uppercase!important;
    text-align: center;
}
```
This is even though I disabled the ‘Special breadcrumbs on cart, checkout, order page’ option as mentioned before.

BREADCRUMBS PROBLEMS

The breadcrumbs padding should be this:
```
.page-heading, .et-header-overlap .page-heading, .woocommerce-wishlist.et-header-overlap .page-heading, .woocommerce-account.et-header-overlap .page-heading {
    padding-top: 3.14em;
    padding-bottom: 3.14em;
}
```
but is still being overriden by this:
```
.woocommerce-wishlist .page-heading, .woocommerce-account .page-heading {
    padding: 1.7em 0;
}
```
This is why I am asking for help. The settings in Theme options are being ignored for breadcrumbs padding on some pages still and the H1 Title is different on some pages.

Regards
#204270 Copied
Olga Barlow

Support staff

November 21, 2018 at 14:28

Hello,

1) I don’t see problem with the breadcrumbs paddings
Blog http://prntscr.com/ll51he
Shop http://prntscr.com/ll5295
Contacts http://prntscr.com/ll52i8
About Us page issue was caused by the negative margin for the first row http://prntscr.com/ll4xfm

2) Check the previous screenshots. There is not any problem with the font-size or line-height. Only font-weight was different but once I chose it in theme options http://prntscr.com/ll55ma and it also is ok.

3) Wishlist and My account pages title font/line-height/paddings really have some problem moments and can’t be changed via ThemeOptions. We’ll fix them. If you want I can send you the fixed file before the update. Just let me know.

Regards

#204309 Copied
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘XStore breadcrumbs H1 title size overridden by other css’' has been successfully resolved, and the topic is now closed for further responses

XStore breadcrumbs H1 title size overridden by other css

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection