-
Posts
-
Hello, I use TEXT BLOCK and SPECIAL HEADING for the great titles of each section of the site. On the desktop it has to be large, but on the device it is hacking. How do I get a title with a desktop font value and the same title loading smaller on screen device?
LINK
Hey mleite1,
To change the size of titles on different devices, try this code in WordPress > Customize > Additional CSS:@media only screen and (max-width: 767px) { h3.av-special-heading-tag,h2.av-special-heading-tag,.eapps-instagram-feed-title { font-size: 10px !important; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { h3.av-special-heading-tag,h2.av-special-heading-tag,.eapps-instagram-feed-title { font-size: 20px !important; } }This is two sets of rules, the top set is for mobile up to tablet, and the font-size will be 10px, The second set is for tablet up to laptop, and the font will be 20px.
Your current rules will be for laptops and up including desktops.
Please feel free to adjust the font-sizes to suit.Best regards,
MikeMike, thank you very much for the return. I just entered the code. I put the font value for the first code, DEVICES, and it did not change. I also added two lines to your code and it did not work. What should I be doing wrong?
/ * DEVICE RULES * /
@media only screen and (max-width: 767px) {
h3.av-special-heading-tag, h2.av-special-heading-tag, .eapps-instagram-feed-title
font-size: 14px!important;
text-transform: uppercase !important;
font-weight: 800 !important;;
}
}
/
See the picture in my SPECIAL HEADING configuration
https://d.pr/Br86G0
/
Another observation.For titles in TEXT BLOCK does this code work?
In Special Heading this code is for any H (h1, h2, h3, h3, h5).Hi,
Perhaps you needed to clear your cache, because it seems to e working for me. Please see screenshot in Private Content area.Best regards,
MikeMike, we worked on the site this weekend. We tested on several machines, cleared the cache and did not change using the above code. You can check the code and see what I’m saying.
Is there anything wrong with setting the special heading? Can you check for me? I will make access to the site admin available.
I put large font size in code. I did this to see the effect. There was not.
Hi,
Your css was missing a “)” so the desktop rules was not working.
I fixed your css and tested “carmel5” homepage, your css rules say under 767px, font should be 44px & between 768px – 1023px, font should be 70px.
This is now working, please check.
I had to move the Instagram Feed css rules to the plugins Custom CSS tab, because it was overwriting it there, if you want to change it, please go there.
I also recommend removing your committed out css rules, as this could cause trouble for you someday.
Please clear your browser cache and check.Best regards,
MikeMike, thanks for the feedback.
Answer me a question. Does this code work for all resolutions (desktop and devices)? I ask you this because on the desktop this code does not change the size of the titles. Check out the video I made.
I want for desktop and devices. It’s possible?
link video
https://d.pr/3ApHpV/
Do we move the code at the same time? I was doing some testing a little while ago. Do you confirm that the code is okay?
/
@media only screen and (max-width: 767px) {
h3.av-special-heading-tag,h2.av-special-heading-tag,.eapps-instagram-feed-title {
font-size: 44px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
h3.av-special-heading-tag,h2.av-special-heading-tag,.eapps-instagram-feed-title {
font-size: 70px !important;
}
}Hi,
No that code is not right.
also, the code has the max-width of (max-width: 1023px) I will change.
New code:/*TITULOS PARA DEVICES E DESKTOP*/ /*DEVICES*/ @media only screen and (max-width: 767px) { .av-special-heading.av-special-heading-h3 h3.av-special-heading-tag { font-size: 44px !important; } } /*DESKTOP*/ @media only screen and (min-width: 768px) { .av-special-heading.av-special-heading-h3 h3.av-special-heading-tag { font-size: 70px !important; } }new code in Instagram Feed
@media only screen and (max-width: 767px) { .eapps-instagram-feed-title-visible { font-size: 44px !important; } } @media only screen and (min-width: 768px) { .eapps-instagram-feed-title-visible { font-size: 70px !important; } }Best regards,
MikeHi,
Which text block title would you like to change?
This works on the h3 headings that you have on your page.Best regards,
MikeHello Mike, we will use some blocks of text on the page with the title text block. We would like to control the size of the title on the devices and on the desktop. Same as we did with special heading.
It is possible?
Hi,
In this case, the “Title Here”, is plain text in a text block element, so it would be best to add a custom class to it so we can target it. I added the class “text-title” to it in the “custom css class” box, please look for this, here is a screenshot:
You can use this class as many times as you like, anywhere on your site. Then add this css to control the size of the text:/*mobile*/ @media only screen and (max-width: 767px) { .text-title { font-size: 44px !important; } } /*tablet-desktop*/ @media only screen and (min-width: 768px) { .text-title { font-size: 70px !important; } }Please adjust the font-size to suit.
Best regards,
Mike
- You must be logged in to reply to this topic.