Comments cristian started the conversationMarch 11, 2019 at 11:44amhello there,where can I change the font size for the hero caption title? Is it a Css that gets added? Will this size still be responsive , e.g. adapt its size for the mobile ? thank you for your help 1,810Support repliedMarch 11, 2019 at 4:01pmCristian,to resize it on mobile you need to use the CSS code is media queries, media responsive breakpointshttps://www.w3schools.com/css/css_rwd_mediaqueries.aspthe css code to set hero title font attributes is:.hero-title { font-weight: 700; font-size: 84px; line-height: 90px;}so for desktop you would set.hero-title { font-size: 70px;}and for mobile screens @media only screen and (max-width: 767px) { .hero-title { font-size: 25px; }}in customizer -> additional CSSjust to give you an example.Thank you. Clapat Support https://www.clapat.com/ Review Envato Item Support Policycristian repliedMarch 12, 2019 at 8:40amthank you, that works well. Could you just indicate also the actual font attribute so that I can change to a different font ? 1,810Support repliedMarch 12, 2019 at 6:32pmSure, the default font attributes values are:.hero-title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 84px; line-height: 90px;}Thank you. Clapat Support https://www.clapat.com/ Review Envato Item Support Policycristian repliedMarch 14, 2019 at 10:17amgreat, thank you.- Is there also a possibility for opacity? Say, I wanted to make it 60 % trnasparent ? - maybe adapt the color ?thank you so much for this helpsandra 1,810Support repliedMarch 14, 2019 at 5:08pm.hero-title { color: #000 !important; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 84px; line-height: 90px; opacity: 0;}change the color hex code and opacity (from 0 to 1, for ex 0.5, 0.65 etc )Thank you. Clapat Support https://www.clapat.com/ Review Envato Item Support Policycristian repliedMarch 14, 2019 at 6:57pmhm, seems to be only some of those values work, which is weired. I place font family, color, weight and opacity, but it doesnt seem to affect the text unfortunatly. ( while font size and line height do work) Could you indicate what I am doing wrong? ( I atach a screenshot of where and homw I place it) 1,810Support repliedMarch 14, 2019 at 9:02pmI need to see the page, if possibleThank you. Clapat Support https://www.clapat.com/ Review Envato Item Support Policy cristian replied privately 1,810Support repliedMarch 15, 2019 at 12:19pmFont weight property has invalid value 10, I changed to 100https://www.w3schools.com/cssref/pr_font_weight.aspand the rest I added !important to each attributeThank you. Clapat Support https://www.clapat.com/ Review Envato Item Support Policy Sign in to reply ...
hello there,
where can I change the font size for the hero caption title? Is it a Css that gets added? Will this size still be responsive , e.g. adapt its size for the mobile ?
thank you for your help
Cristian,
to resize it on mobile you need to use the CSS code is media queries, media responsive breakpoints
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
the css code to set hero title font attributes is:
.hero-title {
font-weight: 700;
font-size: 84px;
line-height: 90px;
}
so for desktop you would set
.hero-title {
font-size: 70px;
}
and for mobile screens
@media only screen and (max-width: 767px) {
.hero-title {
font-size: 25px;
}
}
in customizer -> additional CSS
just to give you an example.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
thank you, that works well.
Could you just indicate also the actual font attribute so that I can change to a different font ?
Sure, the default font attributes values are:
.hero-title {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 84px;
line-height: 90px;
}
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
great, thank you.
- Is there also a possibility for opacity? Say, I wanted to make it 60 % trnasparent ?
- maybe adapt the color ?
thank you so much for this help
sandra
.hero-title {
color: #000 !important;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 84px;
line-height: 90px;
opacity: 0;
}
change the color hex code and opacity (from 0 to 1, for ex 0.5, 0.65 etc )
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
hm, seems to be only some of those values work, which is weired.
I place font family, color, weight and opacity, but it doesnt seem to affect the text unfortunatly.
( while font size and line height do work)
Could you indicate what I am doing wrong? ( I atach a screenshot of where and homw I place it)
I need to see the page, if possible
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Font weight property has invalid value 10, I changed to 100
https://www.w3schools.com/cssref/pr_font_weight.asp
and the rest I added !important to each attribute
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy