-
Search Results
-
In reply to: Photo Caption Size
Hi,
Yes, the default content font size and typography settings are recent additions to the theme options. Regarding the line spacing, you can try this css code:
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .av-image-caption-overlay-center { line-height: 1em; } }Best regards,
IsmaelIn reply to: Different footer on mobile
Hi,
Glad you found the feature useful. You can use the following css code to adjust the size of the social icons and disable the animation.
.av-share-box ul li a { font-size: 30px; transition: none; opacity: 1; visibility: visible; }Best regards,
IsmaelHello, I need CSS for Font size and Color options for “Full page overlay menu” sub menu.
They have a lot of SubMenus and I am trying to differentiate from main nav.
Thanks
On the main Portfolio page, the Header font size is too small on “Mobile view” only, and the text below the header might need to be adjusted on Mobile also. Can you get me some CSS code?
thanks
screenshot: https://img.savvyify.com/image/Screen-Shot-2025-05-01-at-9.49.17-AM.9tvxO
In reply to: Photo Caption Size
Hi,
Thank you for the update.
You may need to remove the body and p tag configs in the Enfold > Advanced Styling panel because they override the custom styling of the image caption. You can adjust the Default Content Font Size in the Enfold > General Styling > Typography panel instead.
Here is what it looks like after we removed the advanced styling of the p and body tags.
`
Best regards,
IsmaelIn reply to: Photo Caption Size
Hey William,
Thank you for the inquiry.
You can adjust the image caption’s font size in the Styling > Image Caption panel. Please check the screenshot below.
Best regards,
IsmaelIn reply to: filter: avf_dynamic_css_after_vars
Hi,
Looks like this is only set when you adjust the Enfold > General Styling > Typography > Default Content Font Size settings. This overrides the default body font size.
Best regards,
IsmaelZur Umsetzung der Barrierefreiheit ab Juni 2025 habe ich Fragen, in wie fern hier bei Enfold mit Updates Möglichkeiten geplant sind.
Was mir beim umsetzen als Probleme, die nicht einfach selbst lösbar aufgefallen ist:
1.) Buttons des Cookiebanners lassen sich nicht via Tab auf der Tastatur ansteuern – wird das noch geändert?
2.) Wird es eine Option geben, die man einblenden kann, wo der Nutzer einfach die Schriftgröße selbst verändern kann? Also einfach mit + und – (Buttons via Tastatur auswählbar)?
3.) Ist das Einbinden von ARIA Attributen bei Elementen wie Buttons geplant? Habe da bei Enfold nur diesen Thread gefunden: https://kriesi.at/support/topic/aria-label/Punkte 1 & 2 wären tatsächlich nur eingeschränkt selbst lösbar bzw. nur mit größeren Aufwand oder ggf. anderen Plugins.
Regarding the implementation of accessibility from June 2025, I have questions about how far Enfold is planning to go with updates.
What I noticed during implementation as problems that cannot be easily solved by myself:
1.) Buttons of the cookie banner cannot be controlled via tab on the keyboard – will this still be changed?
2) Will there be an option that can be shown where the user can simply change the font size themselves? So simply with + and – (buttons selectable via keyboard)?
3) Are there plans to include ARIA attributes for elements such as buttons? I only found this thread on Enfold: https://kriesi.at/support/topic/aria-label/Points 1 & 2 would actually only be solvable to a limited extent or only with greater effort or possibly other plugins.
Translated with DeepL.com (free version)
In reply to: filter: avf_dynamic_css_after_vars
Hi,
This is what we see on a clean installation of version 7.1.
And only –enfold-font-size-theme-content is declared in the themes/enfold/css/dynamic-css.php file, line 108.
Best regards,
IsmaelHi,
Have you tried hiding the testimonial section on mobile view? You can toggle the Element Visibility settings in the Advanced > Responsive panel.
You can also use this css code to adjust the size of the testimonial section on mobile view:
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial { padding: 0; font-size: 0.85em; } #top .av-large-testimonial-slider .avia-slideshow-arrows { position: absolute; width: 100%; bottom: 50px; } #top .avia-slideshow-arrows a.next-slide { right: -30px; } #top .avia-slideshow-arrows a.prev-slide { right: auto; left: -30px; } }Best regards,
IsmaelIn reply to: Overlapping sections
Hey MomentumMarketingSupport,
Thank you for the inquiry.
You may need to avoid using the ID “comment” for the color section because this css rule gets applied to it.
#comment { width: 602px; height: 150px; padding: 10px 7px; font-size: 12px; margin: 0; }This is how it looks when the height property is disabled.
Best regards,
IsmaelIn reply to: Navigation Bar search widget SVG image
Yes, that CSS is there but whatever is changed on it affects both the navigation bar search box and the content custom search widget. Below is the CSS for the home page content custom search widget. Is anything is this customization affecting the navigation search box? It was working correctly for several years up until the latest version of Enfold. I don’t know what changed, but rolling back to previous versions of Enfold in a staging area corrects it.
#chsearchbox {
position: relative;
background-color: transparent!important;
margin-top: -15px;
z-index: 55;
border: none!important;
}
#search-3 #s {
left: 35px;
content: url(‘https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png’);
width: 85%;
margin: -32px auto !important;
padding: 41px;
border: none!important;
box-shadow: 0px 5px 15px 0px #cccccc;
}
#search-3 .avia-font-entypo-fontello {
background-image: url(https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
background-color: transparent!important;
width: 67px!important;
}
#search-3 #searchform #searchsubmit {
_font-size: 2.5em; /*set the size of the magnifying icon*/
font-size: 1.5em;
color: transparent;
}
#search-3 input[type=”text”] {
font-size: 30px; /*set the size of the search box input font*/
}
#search-3 .button {
left: 95px;
}
#searchsubmit .avia-font-entypo-fontello {
display: none!important;
}In reply to: Fullwidth easy slider not responsive on mobile
That’s helpful, thank you…I just adjusted the font sizes and the caption title and content are better now, but still running off the bottom of the image…And what about adjusting the slider’s image size for mobile so it runs full height? (I’d like the image to reach to the bottom of the screen.)
In reply to: filter: avf_dynamic_css_after_vars
Hey Guenter,
Thank you for the inquiry.
We can’t find the enfold-font-size-content-font variable anywhere in the theme — only enfold-font-size-theme-content. Where did you see the enfold-font-size-content-font variable?
Best regards,
IsmaelIn reply to: Fullwidth easy slider not responsive on mobile
Hey dryo1,
Thank you for the inquiry.
Have you tried adjusting the Styling > Font Sizes settings? You can set different values for different screen sizes.
Best regards,
IsmaelHi,
Thank you for the inquiry.
We adjusted the code in the Quick CSS field a bit and temporarily disabled the Performance > File Compressions settings.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a { font-size: 32px; line-height: 0.5em; } #top #wrap_all #header #av-burger-menu-ul>li.av-active-burger-items { opacity: 1; top: 0; left: 0; padding: 0.2em 0; } }Best regards,
IsmaelHi Ismael and thanks for your quick reply.
I’ve added the CSS code you sent me in the Quick CSS panel, but that didn’t make any changes to the mobile menu.
In the Advanced Styling Menu –> Menu Links in overlay/slide out , the font size is set to 90 px and on desktop it looks fine, but it seems to be 90 px on mobile view aswll despite adding the CSS code.
I’ve attached the login credentials in Private Content if you want to take a closer look youself.
Hey Scanmark,
Thank you for the inquiry.
You can use this css code to manually adjust the style of the menu items on mobile view:
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .html_av-overlay-side #top #wrap_all .av-burger-overlay li a { line-height: 1.3em; height: auto; padding: 15px 50px; display: block; text-align: left; text-decoration: none; font-size: 16px; } }Best regards,
IsmaelHi there
I’ve been searching high and low, but I can’t seem to find an answer to this question.I’m displaing the menu Items for desktop as a Burger menu. I’ve styled it by using the “Menu Links in overlay/slide out” option in “Advanced Styling”.
So far…so good.The problem is that when I’m adjusting the font size so it looks good on the desktop, it’s way to big on the mobile. Adjusting it so it fits to the mobile, makes the font to small for the desktop.
Can you provide me with a CSS-code that let’s me adjust the font size for either of these?
In reply to: page speed super slow on mobile
Thank you. I can Google.
Again, what I ask you is to know the proper settings in the Enfold theme for the best speed. Performance And Optimization . “ Don’t you have any tutorials on how to see these settings?” could help me here?
Why am I getting excessive DOM on every page? Did you even look at the Page Speed Insights? I saw you look at someone else’s and gave them extensive help so I added the link in.
I ADDED IN THE PLUG IN AND RAN A TEST.
Largest Contentful Paint element 7,130 ms
Defer offscreen images Potential savings of 493 KiB
Reduce initial server response time Root document took 1,430 ms
Serve images in next-gen formats Potential savings of 97 KiB
Eliminate render-blocking resources Potential savings of 160 ms
Reduce unused CSS Potential savings of 56 KiB
Ensure text remains visible during webfont load
Avoid serving legacy JavaScript to modern browsers Potential savings of 9 KiB
Reduce unused JavaScript Potential savings of 100 KiB
Avoid an excessive DOM size 1,071 elements.I spoke to a man who wants thousands of dollars to speed up this website. (I do not make any money off of this. My art is and my advise my gift to the world) which is way too much … its only slow on MOBILE… he MENTIONED AVIA FILES INSTEAD OF Jpeg. Do you have any information on usith this in Enfold?
I don’t think the plug in did anything.
anything you can do to help would be appreciated.
In reply to: Reduce size of navigation arrow in Easy Slider
Hey es.design.ma,
Thank you for the inquiry.
You can use this css code to adjust the size of the slider arrows:
#top .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide { width: 30px; height: 30px; line-height: 30px; font-size: 16px; top: 50%; margin: -30px 15px 0; } #top .avia-slideshow-arrows a.avia-svg-icon svg:first-child { margin-top: 0; height: 0.5em; width: 0.5em; }Best regards,
IsmaelIn reply to: Center logo with Burger icon on right
on https://kriesi.at/support/topic/center-logo-with-burger-icon-on-right/#post-1481879 it is the setting now.
change font-size to 36px or something else.#top #wrap_all #av-burger-menu-ul li { font-size: 36px !important; }In reply to: Center logo with Burger icon on right
In reply to: Center logo with Burger icon on right
font-size is now on :
#top #wrap_all #av-burger-menu-ul li { font-size: 40px; }just change that value
In reply to: Center logo with Burger icon on right
In reply to: A small magnifying glass instead of text in the menu
Hi,
Thank you for the info.
Instead of using the icon shortcode, we replaced it with the search icon html.
<span class="av_font_icon av-m9s1gr1e-6ed42716956a76916230d7da2b2f0695 avia_animate_when_visible av-icon-style- avia-icon-pos-left avia-iconfont avia-font-entypo-fontello av-no-color avia-icon-animate avia_start_animation avia_start_delayed_animation"><span class="av-icon-char" data-av_icon="" data-av_iconfont="entypo-fontello" aria-hidden="true"></span></span>We also added this css code to adjust the position and size of the icon in the menu.
.menu-item .av_font_icon { float: none; margin-right: 0; font-size: 16px; }Best regards,
IsmaelIn reply to: A small magnifying glass instead of text in the menu
Hey schweg33,
Thank you for the inquiry.
In the Navigation Label field of the search menu item, you can replace the text with the icon shortcode or an icon image.
[av_font_icon icon='search' font='svg_entypo-fontello' style='' caption='' size='40px' position='left' color='' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-m9qks9nw' sc_version='1.0' admin_preview_bg=''][/av_font_icon]Best regards,
IsmaelIn reply to: Show Password Icon missing
Hello,
Any reason this isn’t included in the latest theme udpate?
To fix this icon in all places (Login, Checkout, My Account > Account Details, etc.) and make it look and function like it should (centered, color changing, and character input doesn’t overlap), I recommend this code, which basically pulls in a simplified version of the official WooCommerce layout stylesheet:
.woocommerce form .password-input { display: flex; flex-direction: column; justify-content: center; position: relative } .woocommerce form .password-input input { padding-right: 2.5rem !important; margin-bottom: 0; } .woocommerce form .password-input input::-ms-reveal { display: none } .woocommerce form .show-password-input { background: transparent; border: 0; color: #222; cursor: pointer; font-size: inherit; padding: 0; position: absolute; right: .7em; top: 50%; transform: translateY(-50%); } .woocommerce form .show-password-input.display-password { color: #999 } .woocommerce form .show-password-input::after { font-family: WooCommerce; speak: never; -webkit-font-smoothing: antialiased; content: "\e010"; margin-top: -2px; vertical-align: middle; display: inline-block }In reply to: Change button size in top bar
Hi,
Thank you for the update.
Try to add this css code to further decrease the font size of the elements in the top bar and adjust its height.
@media only screen and (max-width: 768px) { /* Add your Mobile Styles here */ #top #header_meta a, #top #header_meta li, #top #header_meta .phone-info { font-size: 13px; } #top #header_meta .phone-info { padding: 0; margin: 0; } #top #header_meta .sub_menu { line-height: 16px; } }Best regards,
IsmaelIn reply to: Show burger menu to the left of the centered logo
As I said, as a participant I cannot see your private message area, so I cannot see a link if it has been posted. The link would be necessary for verification – because a screenshot is not meaningful enough to give advice.
if that is your css – the
@media only screen and (max-width: 768px) {is nested with a nother media query.
your :@media only screen and (max-width:767px) { .responsive #top #header_main > .container .main_menu .av-main-nav > li > a { padding-left: 0; } }is inside another media query ( with the same settings )
next hint: use for the max-width media query the odd setting – and for min-width the even ones.I don’t know if the above leads to conflicts, but put this as code instead:
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .responsive #header_main_alternate { display: block; } .responsive #top #header .main_menu { width: auto !important; } #header_meta .phone-info-custom::before { background-color: #ffffff !important; } .responsive #top #wrap_all .main_menu { left: 0px !important; } .responsive #top .logo { width: 50% !important; } .responsive #top #wrap_all .container { float: right !important; } #header_meta .phone-info-custom { font-size: 15px; font-weight: 800; color: #000000; padding-top: 70px; } #header_meta .container { max-width: 50% ; margin-left: 0px; margin-right: 0px !important; padding-left: 0px !important; padding-right: 0px !important; } /*PHONE INFO*/ #header_meta .phone-info-custom::before { display: none !important; } .phone-info { padding-top: 5px !important; } /*LOGO*/ .responsive .logo img { float: right !important; } .responsive #top .logo { position: static; display: table; height: 80px!important; float: none; padding: 0; border: none; width: 95%; } .main_menu { margin-left: 0px !important; } a { padding-left: 0px !important; } .responsive #top #header_main > .container .main_menu .av-main-nav > li > a { padding-left: 0; } } /* 💻 TABLETTE (entre 769px et 1024px) */ @media only screen and (min-width:768px) and (max-width:989px) { .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu { left: 0 !important; } }
