It seems that currently you have added to Custom Heading sections and I can't seem to find the Text Block area. Could you add the text block area so we can check this out for ya?
Alternatively, if you want to continue using Custom Headers, you can add a unique ID or Class to the sections, then add specific CSS targeting this section using the ID/class for mobile devices. Here's a screenshot of the same.
I added the text block. but i need to set different font size than in the H tag and then on Media to shrink it. What is the CSS to modify the text block. I can modify at media the custom headings with this code, but how do i make it work for text block
@media only screen and (max-width: 690px) { #centerright.vc_custom_heading h1, #centerright.vc_custom_heading h2{ text-align: center !important; } }
/* Style the paragraphs within the custom text block */ @media only screen and (max-width: 690px) { #4every1.custom-text-block h1 { font-size: 20px; } } /* Style the paragraphs within the custom text block */ @media only screen and (max-width: 690px) { #4every1.custom-text-block h2 { font-size: 16px; } }
/* Style the paragraphs within the custom text block */
@media only screen and (max-width: 690px) {
.custom-text-block h1 {
font-size: 20px !important;
}
.custom-text-block h2 {
font-size: 16px !important;
}
}
If it does not work then respond back with backend access - username password with admin role - we try and adjust this from the backend.
My custom heading has two words. how do i make the second word a different color. I added a span within the custom text but it does not render it
Hi there,
The custom heading element cannot use HTML tags.
Consider using the text block element for example that allows you to use HTML then style the text to what you want.
Cheers.
Hi Noah:
i tried text block but if i set within the H tag font size, it does not shrink when displayed on mobile devices.
I added this
<H2 style="font-size: 80px; color: white;"> for everyone
</H2>
but then the font stays the same on mobile.
Then I added @media in the CSS but it did not work.. May be I am using the wrong classes. can you send me an example
Hello Rado,
Thank you for getting back to us.
It seems that currently you have added to Custom Heading sections and I can't seem to find the Text Block area. Could you add the text block area so we can check this out for ya?
Alternatively, if you want to continue using Custom Headers, you can add a unique ID or Class to the sections, then add specific CSS targeting this section using the ID/class for mobile devices. Here's a screenshot of the same.
I hope that helps.
Cheers,
I prefer a text block but it does not resize on a mobile if i specify the font size in the text block
I added the text block. but i need to set different font size than in the H tag and then on Media to shrink it. What is the CSS to modify the text block. I can modify at media the custom headings with this code, but how do i make it work for text block
@media only screen and (max-width: 690px) {
#centerright.vc_custom_heading h1,
#centerright.vc_custom_heading h2{
text-align: center !important;
}
}
Hello there,
Thank you for getting back to us.
Could you please share a screenshot of the text block element you want us to look into this?
We look forward to your feedback.
Cheers,
here it is on the site. I keep it below the custom headings for testing.
The text box top line "Storied Data" is H2 and the one below is H1
here it is in the editor
I added this code but it does not work.
/* Style the paragraphs within the custom text block */
@media only screen and (max-width: 690px) {
#4every1.custom-text-block h1 {
font-size: 20px;
}
}
/* Style the paragraphs within the custom text block */
@media only screen and (max-width: 690px) {
#4every1.custom-text-block h2 {
font-size: 16px;
}
}
Hi Rado,
Could you try the following CSS instead:
If it does not work then respond back with backend access - username password with admin role - we try and adjust this from the backend.
Thanks.
this works. Thank you.
One question - if i have to text blocks, do i have to give them different element IDs if i want different font sizes?
Hey Again,
Yes, that's correct.
Thanks.
ThemeNectar Support Team