-
Search Results
-
In reply to: going crazy withe text aling
The blue box marks the container, which you set to 1500px in the Enfold settings – see my comment above : link
Since the font is set to centered, it will be placed in the middle of the container. If the size is smaller, there will be a gap to the outer edges of the blue box.Originally, you can see in the first screenshot that there is a manually placed line break (
<br>) at the point marked in red.
(click to enlarge the images)
In the second screenshot, I have removed this manual line break in my browser’s dev tools to show you that when there are no line breaks, these lines have the said 1500px width.
Where you are now reporting the lack of smaller widths, you have simply not set manual breaks as above inside the text-block elements.
Hi,
You can adjust the value for all breakpoints, including the first one, which applies to desktops or large screens. To adjust the style of the slider buttons on smaller screens, you can add the following css code:
/* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 768px) { /* Add your Mobile Styles here */ #top .container .slideshow_inner_caption .avia-slideshow-button { margin-top: 10px; padding: 6px 8px; font-size: 13px; } }Best regards,
IsmaelIn reply to: going crazy withe text aling
As i mentioned above – and Mike pointed out again – there are a lot of manual set linebreaks (
<br>)
but if you like you can force a max width of the p-tags by font length units one of the modern one is ch (The width of the 0 character of the font in use) so – 110ch means nearly 110 characters. A more common font unit is em (The font size of the element, or its nearest parent container)I would not recommend this procedure; I would probably rather limit the container itself there, but so that you can see that it also works via css:
#top .avia_textblock p { max-width: 110ch; word-wrap: break-word; margin: 0.85em auto 0; }Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#av-burger-menu-ul li.av-show-submenu > a > .avia-menu-text { color: blue; } #av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text { color: yellow; } .html_av-submenu-hidden #av-burger-menu-ul .av-submenu-indicator:before { color: yellow; font-size: 20px; } #top #wrap_all #av-burger-menu-ul .menu-item-2846 { font-size: 12px !important; }Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.Best regards,
MikeIn reply to: Round Picture Buttons smaller on mobile version?
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { .responsive #top.home #wrap_all #av_section_3 .flex_column.av_one_third { width: 31%; margin-left: 6px; } } @media only screen and (max-width: 500px) { #top.home #wrap_all #av_section_3.main_color .flex_column.av_one_third h3 { font-size: 0.6em; } } @media only screen and (min-width: 501px) and (max-width: 767px) { #top.home #wrap_all #av_section_3.main_color .flex_column.av_one_third h3 { font-size: 0.9em; } }After applying the css, please clear your browser cache and check.
Best regards,
MikeIn reply to: Portfolio Header font size on Mobile
Hey bemodesign,
Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { #top .isotope-item.special_av_fullwidth .av_table_col .entry-title { font-size: 24px; } }Best regards,
RikardHey connect4consulting,
Thank you for the inquiry.
You can add this css code code to adjust the font size of the elements in the header and footer.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .phone-info a { font-size: 12px !important; } #socket .sub_menu_socket li { line-height: 1.4em; } }Regarding the slider caption, try to edit the slides’ Styling > Font Sizes settings. You can define font size values for different breakpoints or screen sizes.
Best regards,
IsmaelIn 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,
Ismael
