Hi Veronika,
I have added this CSS code in Enfold > General Styling > Quick CSS and it fixes the issue:
#top #header .social_bookmarks li a {
font-size : 18px;
}
.av-hamburger-box {
width : 30px;
}
.av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after {
height : 4px;
}
.av-hamburger-inner::after {
bottom : -10px;
}
.av-hamburger-inner::before {
top : -10px;
}
.html_burger_menu_active #top #wrap_all .menu-item-search-dropdown > a {
font-size : 35px;
}
Please review your site.
Best regards,
Nikko
Hi,
For SEO purpose I tried to customize the slider. I chose to use p instead of h tags. I set font size to 34px but I also need to set custom css like font-weight:700, margin-bottom:14px, height:1.1em, But it seems not working in the slider settings. I also tried to add these custom css to Theme – Customize – Additional CSS but not working neither.
Can you help please?
GJ
Hi, how can i change the font size of the blog post xxcerpt?
I tried this solution, but it don’t work:
.entry-content {
font-size: 12px!important;
}
Hi m s,
For the Bloglist with hidden arrow icons, you can reduce the size of the font to fix the issue.
As for tag buttons, it seems you are attempting to use them in a page which unfortunately will not work.
You’ll need to use a Post and not a page for it.
Best regards,
Nikko
Hello,
I would like to use the typography settings. However, I see no change. I also included this code in functions.php: add_theme_support( “avia_options_extended_typography” );
I didn’t make any settings in the “extended styling” settings and didn’t write anything in a CSS. I’m at a loss as to why it isn’t picking up my settings. Here is the page: http://designplanung.de/projekt-026/referenzen/
I set the H3 headlines to a screen resolution of 30 points. The H1 and H2 too, they all have to be the same size.
The symbol box has not been given a font size, everything is set to standard there.
I also installed the latest version. I don’t have caching tools installed.
What could it be?
Best regards,
Martin
Hi,
Thanks for the update. You shouldn’t have to deactivate the plugin, all that should be necessary is to turn off file compression under Enfold->Performance. I did that yesterday, and your site started working as expected then.
Please try this in Quick CSS for the question asked in private.
#text-2 a {
font-size: 12px;
}
Best regards,
Rikard
Good morning guys,
I have continuous problems with the Enfold creative Studio theme despite having installed the latest version of the theme and WordPress.
Very often, when I try to edit any content on the home page (the last time it happened simply by trying to insert the search button, or simply by entering a different font size value) the elements on the top of the home page, although correctly present and displayed admin-side, are no longer displayed online. Likewise, the menu also stops working. The only way to fix this is to load a backup version of the site and clear the cache. What’s wrong with it? The theme is very nice but I can’t be afraid to change anything to not have this inconvenience. Many thanks for the help
Thank you for hiding the icons. In the same section, the blog title font is too big. Longer words are being split onto two lines. How can the text be made a smaller font size?
Also, can the tag buttons be visible in each post item in a Blog Posts element set to Single Author, Big Preview Pic?
Hi,
Glad to know that the modification is working. To adjust the style of the widget text and title, try to add this css code.
#wrap_all #footer .widget p, #wrap_all #footer.widget li a {
font-size: 16px;
text-transform: initial;
}
#wrap_all #footer .widget .widgettitle {
font-size: 24px;
letter-spacing: 1px;
text-transform: initial;
}
And to adjust the text color, try to include this css code.
.footer_color h3, .footer_color a, .footer_color p, .footer_color strong {
color: chartreuse;
}
Best regards,
Ismael
Thanks Mike
This fits great
How can I format the titles and the text of the widgets
size, color, font
thanks
kind regards Franz
Hi Natalia,
Thanks for the clarification.
I tried to change the font sizes of the Special Heading and Text Block and it worked properly.
However, when I am logged out (using Chrome in incognito mode and not logged in) I do see the issue you are having.
It seems to be a caching issue and I was able to fix it on my end when I go to WP Rocket’s main dashboard (link in private content) and Clear all cache in using the three orange buttons in the sidebar (Empty Cache, Preload Cache, and Purge Used CSS).
I hope this information helps.
Best regards,
Nikko
Hi navindesigns,
Please remove all the code I gave you in this thread and replace it with this one instead:
@media only screen and (max-width:767px) {
#top #wrap_all .avia-animated-number {
margin: 75px 0 !important;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
min-height: 140px;
}
#top #wrap_all .avia-animated-number-circle {
width: 80%;
}
#top #wrap_all .avia-animated-number-content p {
font-size: 20px;
line-height: 1.3;
}
}
Best regards,
Nikko
Hi,
Thanks for the feedback, try adding this css:
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
z-index: 1010;
}
.headerMenuItem a {
font-size: 12px;
}
.responsive #top #wrap_all #header_meta .social_bookmarks li a {
color: #fff;
}
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
thanks! i added the first css
few things on mobile only
1 – how do i make the font size 12px on mobile for GET INVOLVED and CONTACT US
2 – I would rather add the social icons in the blue are ( it is actually there but it is not showing up for some reason)
3 – I am now unable to open the burger menu on mobile
thanks
-
This reply was modified 3 years, 9 months ago by
navindesigns.
Hey Jacopotj,
Please try the following in Quick CSS under Enfold->General Styling:
.avia-cookie-consent .avia-cookie-consent-button {
padding: 0.9em;
font-size: 14px;
}
Best regards,
Rikard
Hi, I changed in general design some button settings, but this affects the cookie notice in a not aesthetic way. (check this link)
How to reduce the size of the buttons specifically for the cookie notice?
Best regards
if you only try to place one or two additional social icons i do prefer the image method – without using font-icons.
Just download a png ( and this could be a colored one too) and register that new icon as above :
function avia_add_custom_social_icon($icons) {
$icons['TikTok'] = 'tiktok';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
#top #wrap_all .av-social-link-tiktok a:before{
content: "";
width: 30px;
height: 30px;
display: inline-block;
vertical-align: middle;
background: url(/wp-content/uploads/tiktok.png) no-repeat center center;
background-size: contain;
}
#top #wrap_all .av-social-link-tiktok:hover a {
background-color: /*** … etc. what you like to see on hover-style ***/
}
some of those css settings had to be adjusted where you use them – in the footer they got border-radius and are smaller.
Hi m,
In the Advanced Layout Builder, add Post Metadata then edit it.
Under Content (tab) > Add/Edit Metadata, remove Last Modified Date and Categories, then replace Author with Tags and remove by in Prepend a text and save.
Then go to Enfold > General Styling > Quick CSS:
#top .av-post-metadata-container {
padding: 20px 0;
}
#top .av-post-metadata-content {
color: transparent;
}
#top .av-post-metadata-category-link a {
background-color: white;
border: 0;
border-radius: 0.5rem;
box-sizing: border-box;
color: #111827;
font-size: .875rem;
line-height: 1.25rem;
padding: 5px 12px;
text-align: center;
text-decoration: none #D1D5DB solid;
text-decoration-thickness: auto;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
#top .av-post-metadata-category-link:hover a {
background-color: rgb(249,250,251);
text-decoration: none;
}
Hope this helps.
Best regards,
Nikko
Hi Mike, Yes, that fixed the all caps issue but, I am finding that H1, H2 & H3 are not responding to the block edits for font size or letter spacing. I currently have them exaggerated so I know when they are working. I am working on: Portfolio Items / Digital tech capture contact.
Jason
Hi,
Thanks for the update. Please try this CSS instead:
@media only screen and (max-width:767px) {
.home #av_section_1 {
background-size: contain !important;
}
.home #av_section_1 .av-special-heading-tag {
font-size: 48px !important;
margin-bottom: 160px;
}
}
Best regards,
Rikard
Hi Ismael,
Thanks again for your help!
I managed to adjust the css properties to make it look good, using your code. I ended up with this:
#top .av-pencil-iconbox .iconbox_icon {
float: left;
padding: 30px;
font-size: 42px !important;
line-height: 10px !important;
}
#top .av-pencil-iconbox .iconbox_icon:before {
float: left;
transform: translate(-50%, -40%);
}
Thanks again and have a great day!
The topic can be marked as resolved.
Maarten
Bonjour,
Merci pour votre retour. Cependant je ne trouve pas la solution. Pourriez-vous vérifier mes paramètres enfold ainsi que mes extensions actives et me dire si l’une d’elle est le problème?
J’ai rajouter un code dans le CSS rapide :
.masonry-portofolio {
font-size: 22px !important;
}
ma classe est active sur le masonry de la page portofolio Histoire.
Aucun changement après avoir vider l’ensemble du cache navigateur et après avoir désactiver litespeed cache.
Cependant, ce même code fonctionne sur mon site en local avec un affichage sur firefox dont j’ai désactiver totalement le cache du navigateur.
Je doit sans doute oublié quelque chose mais je ne vois vraiment pas quoi. Faut-il me deconnecter et me reconnecter à mon site wordpress après modifications des options et des extensions?
Merci d’avance pour votre aide
Hi navindesigns,
Can you try to change the last code I gave you with this one (so it is universal and not specific to one location):
@media only screen and (max-width:767px) {
#top #wrap_all .avia-animated-number {
margin: 75px 0 !important;
}
#top #wrap_all .avia-animated-number-circle {
width: 80%;
}
#top #wrap_all .avia-animated-number-content p {
font-size: 20px;
line-height: 1.3;
}
}
Best regards,
Nikko
Hello,
I’m using the button code that I’ve found on your website ( [av_button label='Click me' link='manually,http://' link_target='' size='small' position='center' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' av_uid='av-5obiu2i'] ) so i can put it in tabs or other tools. My question is: is there a code I can insert in that fix the button so the link open in a new window?
Thank you, best regards!
Hi wildturkeyway,
Can you try adding this CSS code in Enfold > General Styling > Quick CSS:
@media only screen and (max-width:767px) {
.home #av_section_1 {
background-size: contain !important;
}
.home #av_section_1 .av-special-heading-tag {
font-size: 48px !important;
}
}
Hope it helps.
Best regards,
Nikko
Hi navindesigns,
@media only screen and (max-width:767px) {
.page-id-235 #av_section_2 .avia-animated-number {
margin: 75px 0 !important;
}
.page-id-235 #av_section_2 .avia-animated-number-circle {
width: 80%;
}
.page-id-235 #av_section_2 .avia-animated-number-content p {
font-size: 20px;
line-height: 1.3;
}
}
Just adjust the values as you see fit.
Hope this helps.
Best regards,
Nikko
This is perfect.
Now I have one request on mobile.
The circles are too big and the fonts are too small on mobile
how can I achieve the following on mobile:
1- reduce the size of the circle like 80%
2- Increase the font size
mockup – https://ibb.co/drYwT48
Hi,
Thanks for the login, although it doesn’t seem to be admin because I couldn’t view most of the backend, I see that your issue is with the WordPress Block Editor and an error in it’s styling, it has not added the semicolon to the source code:

for your situation you can try this css in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:
.has-col-969696-color.has-col-000000-background-color.has-text-color.has-background.has-fs-20-px-font-size {
color: rgb(150, 150, 150);
background-color: rgb(0, 0, 0);
font-size: 20px;
font-style: normal;
font-weight: 700;
font-family: serif;
text-transform: capitalize;
letter-spacing: 23px;
white-space: pre-wrap;
min-width: 1px;
}
After applying the css, please clear your browser cache and check.
We can’t adjust the Block Editor because it is a core WordPress element, perhaps try the Advanced Layout Builder.
Best regards,
Mike
No change. I am noticing the issue the most in the typography section. I have noticed the font size & letter spacing do not match the generate in a new tab preview. Appearance is working fine.
Hey Arjan,
Thanks for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:
@media only screen and (min-width: 767px) and (max-width: 1100px) {
/*header*/
.responsive #top #wrap_all #header {position: relative; width:100%; float:none; height:auto; margin:0 !important; opacity: 1; min-height:0;}
.responsive #top #main {padding-top:0 !important; margin:0;}
.responsive #top #main .container_wrap:first-child{ border-top:none; }
.responsive.html_header_top.html_logo_center .logo { left: 0%; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); margin:0; }
.responsive #top .logo{position: static; display:table; height:80px !important; float:none; padding:0; border:none; width:80%; }
.responsive .logo a{display:table-cell; vertical-align: middle;}
.responsive .logo img{height:auto !important; width:auto; max-width: 100%; display: block; max-height: 80px;}
.responsive #header_main .container{height:auto !important; }
.responsive #top .header_bg { opacity: 1; filter: alpha(opacity=1); }
.responsive.social_header .phone-info {text-align: center; float:none; clear:both; margin:0; padding:0;}
.responsive.social_header .phone-info span{border:none; width:100%; text-align: center; float:none; clear:both; margin:0; padding:0;}
.responsive #header_meta .social_bookmarks li{ border-style:solid; border-width:1px; margin-bottom:-1px; margin-left:-1px;}
.responsive #top #header_meta .social_bookmarks li:last-child{border-right-style: solid; border-right-width: 1px;}
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul{float:none; width:100%; text-align: center; margin:0 auto; position: static;}
.responsive #header .social_bookmarks{padding-bottom:2px; width:100%; text-align: center; height:auto; line-height: 0.8em; margin:0;}
.responsive #header_meta .sub_menu>ul>li{float:none; display: inline-block; padding: 0 10px;}
.responsive #header .social_bookmarks li{float:none; display: inline-block;}
.responsive.bottom_nav_header #header_main .social_bookmarks{ position: relative; top: 0; right: 0; margin: 10px auto; clear:both;}
.responsive.bottom_nav_header.social_header .main_menu>div{height:auto;}
.responsive .logo img{margin:0;}
.responsive.html_header_sidebar #top #header .social_bookmarks{display:none;}
.responsive body.boxed#top, .responsive.html_boxed.html_header_sticky #top #header{max-width: 100%;}
.responsive.html_header_transparency #top .avia-builder-el-0 .container, .responsive.html_header_transparency #top .avia-builder-el-0 .slideshow_inner_caption{padding-top:0;}
.responsive #top .av_phone_active_right .phone-info.with_nav span{border:none;}
.responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a,
.responsive #top #wrap_all .av_header_transparency .sub_menu > ul > li > a,
.responsive #top .av_header_transparency #header_main_alternate,
.responsive .av_header_transparency #header_main .social_bookmarks li a,
.responsive #top #wrap_all .av_header_transparency .phone-info.with_nav span,
.responsive #top .av_header_transparency #header_meta,
.responsive #top .av_header_transparency #header_meta li,
.responsive #top #header_meta .social_bookmarks li a{ color:inherit; border-color: inherit; background: inherit;}
.responsive.html_top_nav_header .av-logo-container{height:auto;}
.responsive.html_top_nav_header .av-section-bottom-logo{border-bottom-style: solid; border-bottom-width: 1px;}
/*new mobile*/
.responsive .av-burger-menu-main{display: block;}
.responsive #top #wrap_all .main_menu{top:0;height:80px;left:auto;right: 0;display: block;position: absolute;}
.responsive .main_menu ul:first-child > li a { height: 80px; line-height: 80px;}
.responsive #top .av-main-nav .menu-item{display:none;}
.responsive #top .av-main-nav .menu-item-avia-special{display:block;}
.responsive #top #wrap_all .menu-item-search-dropdown > a { font-size: 24px; }
.responsive #header_main_alternate{display:none;}
.responsive #top #header .social_bookmarks{display:none;}
.responsive #top #header .main_menu .social_bookmarks{display:block; position: relative; margin-top: -15px;}
.responsive #top .av-logo-container .avia-menu{height:100%;}
.responsive #top .av-logo-container .avia-menu > li > a{line-height: 80px;}
.responsive #top #main .av-logo-container .main_menu{display:block;}
.responsive #top #main .av-logo-container .social_bookmarks{display:none;}
.responsive #top #main .av-logo-container .main_menu .social_bookmarks{display:block; position: relative;}
.responsive #top #main .av-logo-container .main_menu{display:block;}
.responsive #top #header_main > .container .main_menu .av-main-nav > li > a,
.responsive #top #wrap_all .av-logo-container {height:80px; line-height:80px; }
.responsive #top #wrap_all .av-logo-container {padding:0;}
.responsive #top #header_main > .container .main_menu .av-main-nav > li > a{
min-width: 0; padding:0 0 0 20px; margin:0; border-style: none; border-width: 0;
}
.responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{border-right-style: solid; border-right-width: 1px; padding-right: 25px;}
.responsive #top #header .av-main-nav > li > a, .responsive #top #header .av-main-nav > li > a:hover{
background:transparent;
color: inherit;
}
.html_cart_at_menu.html_header_sidebar #header_main .avia-menu {
margin-top: 0px;
}
.responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area .widget {
display: none;
}
.html_header_sidebar #menu-item-shop.cart_dropdown {
right: 80px;
border: none;
margin-top: 15px;
}
.html_header_sidebar #header .container {
width: 85%;
}
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike