My client is saying the website doesn't look good on his monitor. Is there a way to specify font sizes for extremely large screens like 4k monitors and televisions?
Hi. Yes, I already have that enabled. The only options are "small desktop", "tablet" and "phone". There is no setting for "giant screen" or "4k monitor".
Hi. This would apply to nearly ALL text throughout the website, so I can't provide you with specific text. I was hoping there might be css code that would allow for H1, H2, etc to be larger sizes on larger screens. For example, settings for H1, H2, etc for screens over 3000 pixels wide.
Great. Thank you! I should be able to adjust the rest of the font headers sizes by using this example. Thank very much for your fast response. What should I use for paragraph text?
My client is saying the website doesn't look good on his monitor. Is there a way to specify font sizes for extremely large screens like 4k monitors and televisions?
Hi There,
Thanks for keeping in touch.
Please enable this option:
Thanks.
Hi. Yes, I already have that enabled. The only options are "small desktop", "tablet" and "phone". There is no setting for "giant screen" or "4k monitor".
Hi There,
We'll need to use css for it as we don't have specific options for large screens font sizes.
Thanks
Ok that is fine. Can you provide some sample css code? Thank you.
Hi There,
This varies from site to site, depending on the text you would want to modify.
You'll need to send us your website URL and also point out the text you would want to modify.
Thanks.
Hi. This would apply to nearly ALL text throughout the website, so I can't provide you with specific text. I was hoping there might be css code that would allow for H1, H2, etc to be larger sizes on larger screens. For example, settings for H1, H2, etc for screens over 3000 pixels wide.
Hey Again,
Yes, we can use a media query to set the font sizes for screens bigger than 3000px .
For example:
@media only screen and (min-width: 3000px) { #page-header-bg h1, body h1, body .row .col.section-title h1, .full-width-content .nectar-recent-posts-slider .recent-post-container .inner-wrap h2, body #error-404 h1, [data-inherit-heading-family="h1"]{ font-size:5em !important; } }Thanks
ThemeNectar Support Team
Great. Thank you! I should be able to adjust the rest of the font headers sizes by using this example. Thank very much for your fast response. What should I use for paragraph text?
body, .toggle h3 a, body .ui-widget, table, select, .bar_graph li span strong, #slide-out-widget-area .tagcloud a, body .container .woocommerce-message a.button, #search-results .result .title span, .woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3, .row .col.section-title .nectar-love span, body .nectar-love span, body .nectar-social .nectar-love .nectar-love-count, body .carousel-heading h2, .sharing-default-minimal .nectar-social .social-text, body .sharing-default-minimal .nectar-love, .widget ul.nectar_widget[class*="nectar_blog_posts_"] > li .post-date, .single [data-post-hs="default_minimal"] #single-below-header span, .single .heading-title[data-header-style="default_minimal"] #single-below-header span, #header-outer .nectar-image-link-widget .image-link-content span, #slide-out-widget-area.fullscreen .nectar-image-link-widget .image-link-content span, #slide-out-widget-area.fullscreen-alt .nectar-image-link-widget .image-link-content span, .nectar-header-text-content, #slide-out-widget-area .nectar-ext-menu-item .menu-item-desc, .woocommerce-checkout-review-order-table .product-info .product-quantity, #ajax-content-wrap .nectar-shop-header-bottom .widget_layered_nav_filters ul li a, #ajax-content-wrap .nectar-sticky-tabs .wpb_tabs_nav li .menu-content > a{ }ThemeNectar Support Team
Thank you again! Can I assume I can just use the H1 example to make additional lines of code by just replacing H1 with H2, H3, etc?
If you wish to use the exact CSS used in the Typography panel then you can use the selectors in "salient/css/fonts.php" file .
Thanks
ThemeNectar Support Team