How to change font size of specific text only in mobile.

[sanjivp27]

I want to modify the font size of specific segments of text only in the mobile version. I don't want to affect the desktop version.

I want the text in the header to be smaller

In the home page I want :

"Product of the Hoopa Valley Nation" to be larger.

"Every Purchase Supports a Minority Artist and Their community" to be smaller.

"Our Process" to be smaller.

"More Bracelets More Cultures Coming Soon" to be smaller.

In the shop page:

"Fighting Back" to be smaller

Any help is greatly appreciated.

Thanks

url: sisubracelets.us

[PageFly-Victor]

Hi@sanjivp27!

This is PageFly - Advanced Page Builder. I would love to give you some recommendation:

Please paste this codes at the bottom of each section;

In Assets:

section-image-banner.css:

@media screen and (max-width: 749px) {
.banner__box > * + .banner__text {
font-size: 55px!important;
}
}

section-rich-text.css:

@media screen and (max-width: 749px) {
.rich-text__blocks>* {
margin-top: 0;
margin-bottom: 0;
font-size: 21px!important;
}
}

component-image-with-text.css:

@media screen and (max-width: 749px) {
h2.image-with-text__heading.h1 {
margin-top: 0;
font-size: 31px!important;
text-align: center;
}
}

Base.css:

@media screen and (max-width: 749px) {
h2.banner_heading.h0 {
margin-top: 0;
font-size: 28px!important;
}
}

You can size as you want.

Best Regards;

Pagefly