CSS Code to change page header title font size on mobile

Hey guys, 

I searched through many posts, and seen some CSS codes, and one changed the font size of the text on the page, but I am trying to change the font size of the text in the header banner on mobile. 

My website is www.moorecsnz.co.nz, and using the MCSNZ Videos page as a bit of a test page for this. 

As you can see on a desktop, it says "Title in Header" in proportion, however, load it on my phone, and "Title in Header" is way too big. 

@media (max-width: 992px) {
    body.header-page {
    font-size: 40% !important;
    }
}

 The code above changed the text below the parapragh title. Not what I was aiming for. 

Any help? Cheers Smiley Happy 

587 Views
Message 1 of 2
Report
1 REPLY 1
Square

Hi @MooreCSNZ  Weebly employees are not able to assist with code edits, but thanks for posting a link to your site as another user may be able to help you out. If you do edit the css/html area of your theme your site would be considered a "custom" theme. It's possible you may not be able to receive assistance from support unless you revert back to a standard Weebly theme. If you are able to add the css override to Settings>SEO>Header your site will still be a standard Weebly theme and it is much easier to troubleshoot. I.e. if you run into an issue, you can remove the code, see if the issues resolves, and the paste it back if the override was not the cause. Just something to think about when you are making these types of edits. Smiley Happy 

Another option is to use the Hide app to display to edit the mobile version slightly. I believe using the Paragraph text option would be better than using the Title. 

572 Views
Message 3 of 2
Report