Center and make page headings smaller on Studio theme

tesswypkema
Visitor
1 0 2

 

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;
}

 

Replies 2 (2)

stefansweb2020
Shopify Partner
114 8 3

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;
}
}
Stefan Momcilovic
Founder of StefansWeb
https://stefansweb.com

Made4uo-Ribe
Shopify Partner
5102 1217 1488

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com