Hello. I've been trying to use the custom text size in the highlighted text module. When changing the custom text size, it reflects on desktop. However, no matter what I change the custom text size to, on mobile, it always shows the exact same size. I've tried vh, vw, px, and em. Again, it will work as expected for desktop. But does not work on mobile screens. I have also checked my responsive typography settings for headings. Is there a bug? Or am I expecting it to do something that it's not meant to do?
For context, all text on this particular landing page is bigger than the rest of the website. However, when the highlighted text is on mobile, it seems to be going to the standard h2 size that has been set globally. Yet, with the highlighted tex module, we set the size extra bigger. It's showing bigger on desktop. But not showing bigger on mobile.
Curious. Is this just for this page / use? Or will this work site wide? Will it also work as expected if I change the size of the custom text within the module as well? Just wondering if it's a permanent fix, or just a specific use case. Thanks.
Hello. I've been trying to use the custom text size in the highlighted text module. When changing the custom text size, it reflects on desktop. However, no matter what I change the custom text size to, on mobile, it always shows the exact same size. I've tried vh, vw, px, and em. Again, it will work as expected for desktop. But does not work on mobile screens. I have also checked my responsive typography settings for headings. Is there a bug? Or am I expecting it to do something that it's not meant to do?
Hi Nick,
Please send in your website url.
Thanks.
Hi Nick,
Please send a screenshot of the highlighted text you would want us to work on as they are several highlighted texts on your webpage.
Thanks.
It's actually all highlighted texts.
For context, all text on this particular landing page is bigger than the rest of the website. However, when the highlighted text is on mobile, it seems to be going to the standard h2 size that has been set globally. Yet, with the highlighted tex module, we set the size extra bigger. It's showing bigger on desktop. But not showing bigger on mobile.
Hi Nick,
Please try this css:
@media only screen and (max-width: 690px){body .row .col.section-title h1, body h1, html body .row .col.section-title.span_12 h1, body.single.single-post .row .col.section-title.span_12 h1, #page-header-bg .span_6 h1, #page-header-bg.fullscreen-header .span_6 h1, .full-width-content .nectar-recent-posts-slider .recent-post-container .inner-wrap h2 {
font-size: 51px;
line-height: 49px;
} } @media only screen and (max-width: 690px){
.col h2, body h2, .single-product div.product h1.product_title, .nectar-shop-header .page-title, .woocommerce-account .woocommerce > #customer_login .nectar-form-controls .control, .nectar_single_testimonial[data-style="bold"] p, #slide-out-widget-area .nectar-ext-menu-item .inherit-h2, #ajax-content-wrap .nectar-inherit-h2, .nectar-category-grid[data-style="mouse_follow_image"][data-h-tag="h2"] .content {
font-size: 64px;
line-height: 76px;
} }
Thanks.
Curious. Is this just for this page / use? Or will this work site wide? Will it also work as expected if I change the size of the custom text within the module as well? Just wondering if it's a permanent fix, or just a specific use case. Thanks.
Hi Nick,
This should be a global solution and that means it should affect other pages with the same text properties as well.
Thanks.