Hello! Could you provide some css code to control the portfolio header text? There seems to be a breakpoint in the middle of widescreen and mobile that feels way too small. In other words, I want to leave the font size I have in the settings for widescreen, and I'm fine with it in mobile... but I want to change the size in-between (smaller laptop, iPads etc)
The code I found on a previous post only changes the intro text I have, not the header.
This isn't working for me. I'm wondering if it's targeting the wrong text element. This isn't a nectar slider image. It's just the top image of all my portfolio pages. I inspected the element and it looks like it's an h1. See screenshot...
Add this into the Custom CSS box located in your Salient Options panel :
@media only screen and (min-width: 480px) and (max-width: 690px) {
body #page-header-bg h1, html body .row .col.section-title h1 {
font-size: 72px !important;
line-height: 82px !important;
}
}
I know this post is five years old. But for whoever needs a solution to what in my opinion is definitely a bug (h1 scaling works throughout the theme, only here it goes bananas), this worked for me. Change the font sizes to whatever you fancy, of course:
@media only screen and (max-width: 690px) { body #page-header-bg h1, html body .row .col.section-title h1 { font-size: 32px !important; line-height: 30px !important; } }
@media only screen and (min-width: 690px) and (max-width: 1000px) { body #page-header-bg h1, html body .row .col.section-title h1 { font-size: 46px !important; line-height: 44px !important; } }
Also - I can confirm that Salient's typography settings has a bug with the H2 and H3 tags. After purging all cache, the sliders for the h2 and h3 tags on responsive typography settings are BROKEN for Small desktops and tablets options. The Phone option works when scaling the slider. The other two do not - there is nothing communicating the css changes when saving and looking in the css history for the versions provided.
We have to refrain to extensive custom css media queries for the time being until this is fixed. Please advise.
Hello! Could you provide some css code to control the portfolio header text? There seems to be a breakpoint in the middle of widescreen and mobile that feels way too small. In other words, I want to leave the font size I have in the settings for widescreen, and I'm fine with it in mobile... but I want to change the size in-between (smaller laptop, iPads etc)
The code I found on a previous post only changes the intro text I have, not the header.
Hey!
@media only screen and (min-width:480px) and (max-width: 690px) { body .nectar-slider-wrap[data-fullscreen="true"] .swiper-slide .content h2 { font-size: 50.6px!important; line-height: 59.8px!important; } }
ThemeNectar Support Team
Hi Tahir,
This isn't working for me. I'm wondering if it's targeting the wrong text element. This isn't a nectar slider image. It's just the top image of all my portfolio pages. I inspected the element and it looks like it's an h1. See screenshot...
Thanks,
Stefan
Hey Again!
@media only screen and (min-width: 480px) and (max-width: 690px) { body #page-header-bg h1, html body .row .col.section-title h1 { font-size: 72px !important; line-height: 82px !important; } }
ThemeNectar Support Team
Hmmm. It's still not working. I'll have to figure out something else. Thanks
I know this post is five years old. But for whoever needs a solution to what in my opinion is definitely a bug (h1 scaling works throughout the theme, only here it goes bananas), this worked for me.
Change the font sizes to whatever you fancy, of course:
@media only screen and (max-width: 690px) {
body #page-header-bg h1, html body .row .col.section-title h1 {
font-size: 32px !important;
line-height: 30px !important;
}
}
@media only screen and (min-width: 690px) and (max-width: 1000px) {
body #page-header-bg h1, html body .row .col.section-title h1 {
font-size: 46px !important;
line-height: 44px !important;
}
}
Hey Again,
Try using the New Responsive Typography Settings in here : http://prntscr.com/gnf951 .
Best.
ThemeNectar Support Team
Hi Tahir, that link is apparently broken.
Also - I can confirm that Salient's typography settings has a bug with the H2 and H3 tags. After purging all cache, the sliders for the h2 and h3 tags on responsive typography settings are BROKEN for Small desktops and tablets options. The Phone option works when scaling the slider. The other two do not - there is nothing communicating the css changes when saving and looking in the css history for the versions provided.
We have to refrain to extensive custom css media queries for the time being until this is fixed. Please advise.
@mdvoravic,
Could you confirm which version of the Salient Theme you are using. Also create a new ticket with your login credentials so we can take a look.
Thanks
ThemeNectar Support Team
hi Tahir
Responsive on or off the problem us still there. I only have problems with h1 though, not h2 and h3.
@nicolasmanio,
Thanks for the Additional Information. Have noted to have the developer look into this for upcoming updates.
Thanks
ThemeNectar Support Team