Changing font size for mobile

My webpage is: http://jeffvece.com

I was able to change the font size on my homepage for both the title and content fields (“You Have a Vision” and “I Can Help You Put It Into Words”) by adding the following text to the CSS editor:

//* Title field: “You Have a Vision” *//
#shapely_home_parallax-2 h1 {
font-size: 6em;
font-weight: bold;
line-height: .9em;
}

//*Content field: “I Can Help You Put It Into Words” *//
#shapely_home_parallax-2 .mb32 {
font-size: 2.9em;
}

However, when viewed on a mobile screen, the text “I Can Help You Put It Into Words” is too small. I tried adjusting it by adding the following to the CSS editor:

@media screen and (max-width: 750px) {
#shapely_home_parallax-2 .mb32 {
font-size: large;
}
}

No matter what value I enter for the font size, it doesn’t change on a mobile screen. If I change “.mb32” above to “h1” I can change the title text font size on mobile (“You Have a Vision”), so this is very confusing.

Thanks ahead of time.

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the font size by going to Appearance > Customize > Additional CSS and pasting it there.


/**Sub text font size/
@media screen and (max-width: 750px)
(index):94
#shapely_home_parallax-2 .mb32 p {
    font-size: 22px;
}

Best Regards,
Support

Hello,
I tried this and it didn’t work.

I find the text in the shapely theme home page under the main title far too small to read and need to make it bigger.
Thank you

Good morning

Please try this code:

/**Sub text font size/
@media screen and (max-width: 750px){
#shapely_home_parallax-2 .mb32 p {
font-size: 22px;
}
}