How to centre the page title on a specific page on mobile?

Hi there,

at the top of your CSS you have a:

@media (min-width: 768px) {

This is missing a closing } which means all CSS that comes after it is only applied to that size screen.

Find the styles that should be included in the media query and add a } after them.

For example:

@media (min-width: 768px) {
  .example-mobile-style-1 {
    /* Styles */
  }
  .example-mobile-style-2 {
    /* Styles */
  }
} /* this bracket closes the media query */

Thank you. That solved it.

Could you take a look at the CSS in 'Merch' in the site library? I see the missing curly brace there, I think?

Hi David,

I just checked, it seems all right.
Thanks for the remind though :)

Thanks Ying,
So why does it not need the curly brace? (Trying to learn :-) )

Which line are you referring to?

The example David provided here basically explained everything:
https://generatepress.com/forums/topic/how-to-centre-the-page-title-on-a-specific-page-on-mobile/#post-1650594

Thanks. Replying to my original question. - David mentioned that I was missing a second curly brace in my code. The CSS was from the underline feature in the navigation at Merch. So - here is Merch and then after that is how I changed it - and when I made the change my text in mobile was centred, which is what I wanted.

Merch from the site library

/* Navigation and Links */

@media (min-width: 768px) {
    .main-navigation .menu>.menu-item>a:before,
    .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
    .loud-link a:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 1em;
        width: 0%;
        height: 2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;
    }

    .main-navigation .menu>.menu-item:hover>a:before,
		.main-navigation .menu>.menu-item.sfHover>a:before,
    .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
    .loud-link a:hover:before {
        width: calc(100% - 40px);

    }

    .loud-link a {
        position: relative;
        padding-right: 40px;
    }

    .loud-link a:hover:before {
        width: calc(100% - 64px);

    }

    .loud-link a:before {
        bottom: -0.5em;
    }
}

.loud-link a:after {
    content: '\21e2';
    margin-left: 5px;
}

My Site after adding the second curly brace

/* Navigation Underline */
@media (min-width: 768px) {
    .main-navigation .menu>.menu-item>a:before,
    .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
    .loud-link a:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 0.2em;
        width: 0%;
        height: 2px;
        background-color: #000;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;
    }
} <<<< I PUT A CURLY BRACE HERE
    .main-navigation .menu>.menu-item:hover>a:before,
		.main-navigation .menu>.menu-item.sfHover>a:before,
    .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
    .loud-link a:hover:before {
        width: calc(100% - 40px);

    }

    .loud-link a {
        position: relative;
        padding-right: 40px;
    }

    .loud-link a:hover:before {
        width: calc(100% - 64px);

    }

    .loud-link a:before {
        bottom: -0.5em;
    }

Hi there,

I've just checked Merch and there are multiple @media (min-width: 768px) sets in it but I'm not sure if what you've pointed out was what David was pertaining to because he said "at the top of your CSS you have a:" which may be a completely different thing (perhaps manually added?).

But I'm afraid I can't verify this for your specific site as private information texts are automatically wiped when the topic is marked resolve.