Headline with accent problem

Support
#1

Hello,

I am following the post about V2 Headings with accent : https://theme.co/apex/forum/t/add-accent-to-v-2-headline-elements/57756

I used the same css with custom class, but one of those headlines falls to the right and I cannot figure out why. The website is: dharmaebooks.org front page. Screen attached.

#2

Hi @tashitendrel,

Thank you for writing in, that happens because of these CSS properties.

    left: 50%;
    transform: translateX(-50%);

Please remove those from the custom CSS given on the other thread.

When you remove that, the headline སྡེ་ཚན། will be back to its original center position and the other headline སྐད་ཡིག (above) will be back to its original position (left), just add a class center-text to that headline and it will center again.



Hope it helps,
Cheers,

#3

Thank you.

#4

Actually, the problem on this website is that all the Tibetan classic headlines do not display properly on Opera and also some Chrome editions. V2 elements, headers and other, display Tibetan script very well and I haven’t heard complains, but classic elements show some problem.
Do you know, what is the difference here? I have checked all the font settings for heading which are dome in global setting and in CSS, but everything looks fine and the Montaga font is the same as used in V2 elements.
There are lots of classic headlines already on the website and it would be difficult to change them all into new headlines…
For example on this page https://dharmaebooks.org/epub-guide/ big headlines are already changed to V2 but the list has classic headlines and here Tibetan gets messed up in Opera…

#5

Hello @tashitendrel,

Thanks for updating in!

I have tested your site both in Chrome and Opera. I could not replicate any issue. The headlines were displayed correctly as expected.

You may be experiencing some caching issues. Please keep in mind that since you have installed a caching plugin W3 Total Cache, clear your plugin cache and regenerate the minified JS/CSS files before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

Hope this helps.

#6

Thank you for looking into it, but those headlines are already V2 elements. Classical headlines are in the list as on the screenshot.

#7

Hello @tashitendrel,

The one you are referring to is not a classic headline. It is a feature list element. If you want to add an accent to that element as well, you will need this custom css code:

h4.x-feature-box-title {
    display: inline-block;
    width: auto !important;
    position: relative;
}

h4.x-feature-box-title:before,
h4.x-feature-box-title:after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    width: 9999px;
    display: block;
    margin-top: -1px;
    background-color: rgba(60,101,117,.5);
    box-shadow: rgba(255,255,255,0.9) 1px 1px 0;
}

h4.x-feature-box-title:after {
    left: 100%;
    margin-left: 0.6em;
}

h4.x-feature-box-title:before {
    right: 100%;
    margin-right: 0.6em;
}

.x-feature-list {
    overflow: hidden;
}

Hope this helps. Please let us know how it goes.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.