Center and make page headings smaller on Studio theme

[tesswypkema]

I was able to add this code to help center my heading on pages on web view but it didn't work for mobile. Please can you help me make my headings centered and smaller on mobile view. Here is an example of the page: 

Spaza Home | About Us – spazahome.co.uk

Please help. 

This is the code that worked on web view: 

.main-page-title{
font-size: 1.26667em !important;
}
.main-page-title{
text-align: center;
}

[stefansweb2020]

You will need to add media query for mobile here is the code

@media screen and (max-width: 768px) {
.main-page-title {
    font-size: 1.26667em !important;
    text-align: center;
}
}

[Made4uo-Ribe]

Hi @tesswypkema 

Check this one. 

h1.main-page-title.page-title.h0 {
    text-align: center !important;
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!