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