CSS Content Text disappeared but works on mobile

Question

Trying to troubleshoot an old developers work...our titles on our company website Link Here the CSS content is not showing up only the bordered line. On mobile it looks to be fine though.

hr.aboutUs { padding: 0; border: none; border-top: 1px solid #808080; color: #808080; text-align: center; }

hr.aboutUs::after { content: "About Us"; display: inline-block; position: relative; top: -0.7em; font-size: 1em; font-weight: bold; padding: 0 0.75em; background: white; }

***Its showing on Safari and Firefox, but not Chrome

It seems you have a problem with your code. However, we can't help unless we have code or information that can reproduce the problem. Otherwise, we are just blindly guessing. — Machavity

Jayman Pandya Jayman Pandya · Accepted Answer · 2017-10-10T18:22:18

You will have to declare the hr.aboutUs:after in a media query that targets desktop devices.

@media all and (max-width: 806px) {
    hr.aboutUs:after {
        content: "About Us";
        display: inline-block;
        top: 1.5em;
        font-size: 1em;
        font-weight: bold;
        padding: 0 0.75em;
        background: white;
        z-index: 10000;
        position: absolute;
        left: 22.5em;
    }
}

Make sure this is added after line #589.

Hope this helps. :)

CSS Content Text disappeared but works on mobile

1 Answers