-
Search Results
-
In reply to: accessibility and av-font-icon
Hey Grobi,
Thank you for the inquiry.
You might need to manually apply the link to the parent element instead of the icon, then add an invisible element with text (Mail):
Example:
<a href="mailto: (Email address hidden if logged out) " style=”text-align: center;”>[av_font_icon icon='ue805' font='entypo-fontello' style='border' caption='Questions on all topics' link='mailto: (Email address hidden if logged out) ' linktarget='' size='70px' position='center' animation='' color='white' sonar_effect_effect='1' sonar_effect_color='white' sonar_effect_duration='1' sonar_effect_scale='1.5' sonar_effect_opac='0.2' animation=''id='' custom_class='' av_uid='av-5rzj40' admin_preview_bg=''][/av_font_icon]<span class="hidden visually-hidden">Mail</span></a>Best regards,
IsmaelIn reply to: add margin left/righ to content section
Hi Rikard,
Yes, this is working, but the text-overlay on the images does not resize together with the images. The first two images on the left have a text overlay. Do you know how to fix this?
Thanks again.I found my own answer, I can cahnge the font size inside the image box.
Hi Enfold team.
Hopefully you had a good start to 2025.To test how I can achieve digital accessibility on my site, i.e. remove the barriers, I am currently trying out WAVE.
I have embedded an av_font_icon on my Enfold site and provided it with a link (a mailto:-link to my email address). Wave finds this problem with my av_font_icon:“Empty link
A link contains no text.”I don’t even know what kind of text should be there at the moment (that will be my next research step), but given the special syntax of the av_font_icons, I do not have an idea how and where I have to insert something like text or whatever. Or – asked you in another way: which element can I integrate into the av-font-icon-syntax to solve my “no-text-issue”?
<p style=”text-align: center;”>[av_font_icon icon='ue805' font='entypo-fontello' style='border' caption='Questions on all topics' link='mailto: (Email address hidden if logged out) ' linktarget='' size='70px' position='center' animation='' color='white' sonar_effect_effect='1' sonar_effect_color='white' sonar_effect_duration='1' sonar_effect_scale='1.5' sonar_effect_opac='0.2' animation=''id='' custom_class='' av_uid='av-5rzj40' admin_preview_bg=''][/av_font_icon]</p>
Can you give me a tip on what I need to do?
Best regards
GrobiIn reply to: icon flipbox bigger icons
Hey spitsdesign,
Thank you for the inquiry.
Have you tried adjusting the Icon Font Sizes in the Styling > Font Sizes panel? Please check the screenshot below:
Best regards,
IsmaelIn reply to: Background Image on Color Section Responsive?
you are talking about a color-section – and its background image – right? i can not see the header image in your question.
vw is another relative length value. https://css-tricks.com/the-lengths-of-css/#aa-vw
1vw is equal to 1% of the width of the viewport ( viewport width = vw)
so if you like to have the background-image to have full width – you can set the bg-image to cover the container – so it has a width of 100vw.
Now if you got a background-image that has a 16:9 aspect ratio then. 16 = 100vw and 9 = x vw ?
Simple rule of three the height of the container had to be 56.25vw.you see my example page that this is a responsive color-section. The only problem is that now the height of the container no longer grows with its content. But if you only got a heading f.e. with fluid font-size – this will work in that manner.
In reply to: Accessibility Issues
Which shortcode do I need to apply the link titles to? I am confused
Are you referring to the PHP code?
my page shortcode does have link titles (see below)
[av_section min_height='' min_height_pc='25' min_height_px='500px' padding='small' custom_margin='0px' custom_margin_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' color='main_color' background='bg_color' custom_bg='#000000' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-gw04d9' sc_version='1.0']
[av_hr class='invisible' icon_select='yes' icon='ue808' font='entypo-fontello' position='center' shadow='no-shadow' height='-25' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' id='' custom_class='' template_class='' av_uid='av-fvcgnh' sc_version='1.0' admin_preview_bg='']
[av_heading heading='CHECK OUT OUR OTHER BOWL 360 FRANCHISE ' tag='h3' style='blockquote modern-quote modern-centered' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='26' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='20' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-desktop-font-size-1='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='custom-color-heading' custom_font='#ffffff' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' headline_padding='' headline_padding_sync='true' av-desktop-headline_padding='' av-desktop-headline_padding_sync='true' av-medium-headline_padding='' av-medium-headline_padding_sync='true' av-small-headline_padding='' av-small-headline_padding_sync='true' av-mini-headline_padding='' av-mini-headline_padding_sync='true' padding='10' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' icon_padding='10' av-desktop-icon_padding='' av-medium-icon_padding='' av-small-icon_padding='' av-mini-icon_padding='' link='manually,http://' link_dynamic='' link_target='' title_attr='' id='' custom_class='' template_class='' av_uid='av-esbpnx' sc_version='1.0' admin_preview_bg='']
Birthdays. Holidays. Parties for the kids. Parties for the office. Parties for you and your friends. When you’re ready to celebrate, then it’s time to BE BOWLED. Bring your party to the lanes and get ready for one unforgettable event.
[/av_heading][av_hr class='invisible' icon_select='yes' icon='ue808' font='entypo-fontello' position='center' shadow='no-shadow' height='-50' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' id='' custom_class='' template_class='' av_uid='av-cpo64d' sc_version='1.0' admin_preview_bg='']
[av_partner heading='' type='grid' columns='8' navigation='arrows' control_layout='av-control-default' nav_visibility_desktop='' nav_arrow_color='' nav_arrow_bg_color='' nav_dots_color='' nav_dot_active_color='' size='no scaling' img_size_behave='' border='' img_border='solid' img_border_width='1' img_border_width_sync='true' img_border_color='#cccccc' border_radius='12' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' padding='10px' padding_sync='true' animation='slide' transition_speed='' autoplay='false' interval='5' heading_tag='' heading_class='' img_scrset='' lazy_loading='disabled' el_id='' custom_class='' template_class='' av_uid='av-bil12l' sc_version='1.0']
[av_partner_logo id='2178' id_dynamic='' hover='Bowl 360 Ozone Park' link='manually,https://bowl360.nyc/' link_dynamic='' link_target='_blank' linktitle='Bowl 360 Ozone Park' av_uid='av-9cabb1' sc_version='1.0']
[av_partner_logo id='2180' id_dynamic='' hover='' link='manually,https://bowl360astoria.nyc/' link_dynamic='' link_target='' linktitle='Bowl 360 Astoria' av_uid='av-6z8btp' sc_version='1.0']
[av_partner_logo id='2181' id_dynamic='' hover='' link='manually,https://bowl360brooklyn.nyc/' link_dynamic='' link_target='' linktitle='Bowl360 Brooklyn' av_uid='av-6jvk4t' sc_version='1.0']
[av_partner_logo id='2183' id_dynamic='' hover='' link='manually,http://bowl360newhydepark.com/' link_dynamic='' link_target='' linktitle='Bowl 360 New Hyde Park' av_uid='av-44jhel' sc_version='1.0']
[av_partner_logo id='2184' id_dynamic='' hover='' link='manually,https://bowl360strikecityspringhill.com/' link_dynamic='' link_target='' linktitle='Bowl 360 Strike City Spring Hill' av_uid='av-101zh' sc_version='1.0']
[av_partner_logo id='2220' id_dynamic='' hover='' link='manually,https://island360restaurant.com/' link_dynamic='' link_target='' linktitle='Island 360 Restaurant' av_uid='av-101zh-2' sc_version='1.0']
[av_partner_logo id='2222' id_dynamic='' hover='' link='manually,https://paddles360.com/' link_dynamic='' link_target='' linktitle='Paddles 360' av_uid='av-101zh-1' sc_version='1.0']
[av_partner_logo id='2260' id_dynamic='' hover='' link='manually,https://uptownbarandgrill360.com/' link_dynamic='' link_target='' linktitle='Uptown Bar and Grill' av_uid='av-101zh-1-1' sc_version='1.0']
[/av_partner][/av_section]
In reply to: Button Place
Hi,
Did you try to set a smaller font size for the heading on mobile sizes? You can do so in the Styling tab once you click into each slide.
Best regards,
RikardIn reply to: Add Icon to a colored Menu Button
Hey andreas_anselm,
Thank you for the inquiry.
You can use the Icon shortcode directly in the Navigation Label field. Example:
[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' size='16px' 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='' av_uid='av-m5xinkob' sc_version='1.0' admin_preview_bg=''][/av_font_icon] Call UsThen add this css code to adjust the style of the button menu item:
#top #header .av-menu-button>a .avia-menu-text { display: inline-block; line-height: 30px; border-radius: 4px; }Best regards,
IsmaelIn reply to: H2 Not Staying the Right Size
Hi,
For H2 headings in text elements, the default font size is 28px, this is a different element that the “Special Heading”.
I made the change for you in the Enfold Theme Options ▸ General Styling ▸ Typography ▸ Advanced Options: Customize Typography Settings
adjust to suit, these are now 40px
On your /hot-spring-spas-vigor-cold-plunge/ page that are all “Special Heading” elements or H3 and are correct from Ismael above.
Please clear your browser cache and check.Best regards,
MikeIn reply to: Add line of text under Reviews on Products pages
Hi,
You can use this css code to adjust the product price:
#top .price, #top .price span, #top del, #top ins { display: inline; text-decoration: none; font-size: 30px; line-height: 24px; font-weight: 600; }If you have any further questions, we kindly ask that you open a new thread. As threads become longer in the forum, they can become harder to manage, tend to drift off-topic, and make it more difficult for users to search for solutions. Keeping threads focused on the original topic helps us track resolutions more effectively and allows users to more easily find answers to similar issues.
Thank you!
Best regards,
IsmaelIn reply to: Add line of text under Reviews on Products pages
You are awesome!
Can you please please tell me how to adjust the Price font size? or get a CSS code for that?In reply to: Add line of text under Reviews on Products pages
Hi,
We added this script to move the sales count under the ratings
function ava_custom_script_move_product_sales_count() { ?> <script type="text/javascript"> (function ($) { $(document).ready(function () { var salesCount = $('.product-sales-count'); var productRating = $('.woocommerce-product-rating'); salesCount.insertAfter(productRating); }); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_custom_script_move_product_sales_count', 9999);And added this code in the Quick CSS field to adjust the style a bit.
.product-sales-count { font-size: 0.8em; margin-top: 0; top: -10px; position: relative; }Best regards,
IsmaelIn reply to: Add line of text under Reviews on Products pages
Great, but can you remove the 0+ at the beginning? I don’t want it to actually track sales, I will fill in the text myself. See screenshot.
And lastly, could you make the font a couple sizes smaller please?
Let me know.
Thanks!In reply to: Probleme mit Portfolio Raster
Hi,
Thanks for that. I’m seeing this in a text block, what happens if you remove it?
<h3><!--[av_button label='WhatsApp' link='manually,https://api.whatsapp.com/send?phone=4917642403291' link_target='' size='medium' position='left' icon_select='yes' icon='ue83b' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' admin_preview_bg='' av_uid='av-3l5p7lx']--></h3>Best regards,
RikardIn reply to: H2 Not Staying the Right Size
Hi,
You need to edit all the Special Heading elements on the page and adjust the Styling > Font Sizes settings. Please refer to the screenshot in the private field.
To learn more about the theme, please check the documentation: https://kriesi.at/documentation/enfold/intro-to-layout-builder/
Best regards,
IsmaelIn reply to: H2 Not Staying the Right Size
Hi,
Thank you. Where do I find the Special Heading elements in the page and Styling > Font Sizes because it’s off on a few pages.
Thanks!In reply to: H2 Not Staying the Right Size
Hi,
UPDATE: We set the font size of the “Ready to take the Plunge?” heading to 40px.
Best regards,
IsmaelIn reply to: H2 Not Staying the Right Size
Hi,
Thank you for the update.
Did you check the value of the Styling > Font Sizes settings? Please edit the Special Heading elements in the page, then adjust the value of the Styling > Font Sizes settings.
Best regards,
IsmaelIn reply to: H2 Not Staying the Right Size
Hey jnightingale,
Thank you for the inquiry.
The font sizes of the Special Heading elements were configured manually. You have to adjust them by editing the elements and adjusting the values in the Styling > Font Sizes panel. Let us know the result.
Best regards,
IsmaelHey, I’m trying to get this logo to switch to a different version below 1024px browser width. I’ve been using the filters from https://kriesi.at/support/topic/different-logo-in-the-header-for-mobile-version/ including the addition from @ismael for the screen width support https://kriesi.at/support/topic/different-logo-in-the-header-for-mobile-version/#post-965244 — The logo is switching for mobile but only for iPad mini and below (< 768px).
My situation may be further complicated because this is a Left Sidebar layout and I’m using some css to switch to the Top Header layout below 1024px.
So, here’s the code I’m using and the css below that — can you help me get the logo switching at 1024 so the big vertical logo doesn’t show on iPad Air and Pro? Thanks and lmk if you have any questions.
/* USE ALTERNATE LOGO FOR MOBILE HEADERS */ add_filter('avf_logo','av_change_logo'); function av_change_logo($logo) { if(wp_is_mobile()) { $logo = "https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png"; } return $logo; } add_action('wp_footer', 'ava_custom_script'); function ava_custom_script(){ ?> <script type="text/javascript"> (function($)) { $(document).ready( function() { if($(window).innerWidth() <= 1024){ $('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png'); } }); })(jQuery); </script> <?php }/* SWITCH LEFT COLUMN TO TOP HEADER AT 1024 */ @media only screen and (min-width: 768px) and (max-width: 1024px) { .html_header_sidebar .av-sidebar-social-container { display: none; } .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img { opacity:1 } .responsive #top .av_header_transparency .logo img.alternate { display:none; } .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; } #header .avia-custom-sidebar-widget-area { display:none; } .responsive.html_header_sidebar .logo { padding: inherit; } .html_header_sidebar .logo img { padding: 10px 10px 10px 30px; } #top #header .av-main-nav > li { display: none; } #top #header .av-main-nav > li#menu-item-search { display: block; } #top #header .av-main-nav > li.av-burger-menu-main.menu-item-avia-special { display: block; } .html_header_sidebar .main_menu { position: absolute; margin: 6%; } .html_header_sidebar #header .av-main-nav { padding: 0; } .html_header_sidebar .logo { width: 40%; } } @media only screen and (max-width: 1024px) { #search-3.widget, #custom_post_widget-2.widget { padding: 0 40px 40px 40px; display: none; } } @media only screen and (max-width: 1140px) { .avia-button.avia-size-small { padding: 10px 10px 8px; font-size: 13px; min-width: 65px; } } @media print { .html_header_left #top #header { display: none; } .html_header_left #main { margin-left: 0; } } @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { #search-4, #custom_post_widget-7 { display:none; } }In reply to: Font size in Masonry
Hey Martin,
Please try the following in Quick CSS under Enfold->General Styling:
.av-masonry-entry .av-masonry-entry-title { font-size: 24px; }Best regards,
RikardTopic: Font size in Masonry
Hello,
I’m currently setting up the site http://designplanung.de/projekt-012/whirlpools/chrom-serie/ and would like the headlines in the Masonry gallery to be larger (OMAHA, SEATTLE…). I thought I could set this by defining the H3 headings, but somehow nothing is happening. Where do I set this?
best regards,
MartinIn reply to: Header Menu
Hey Andreotti,
Thank you for the inquiry.
You can adjust the font size in Enfold > General Styling > Typography, and for additional configurations, you can edit the Main Menu elements in Enfold > Advanced Styling. Let us know if you need further assistance.
Best regards,
IsmaelTopic: Header Menu
Hello I wish you the best wishes for the new year..
Can you please help me:
how can I change the font size in the main menuthanks
Andrea K.
In reply to: Centre menu below
give this a try:
@media only screen and (min-width: 990px) { .html_header_top.html_logo_center #top #header_main_alternate .main_menu { width: 100% } .html_header_top.html_logo_center #header_main_alternate .main_menu #avia-menu { display: flex !important; flex-flow: row nowrap; justify-content: space-evenly; } .html_header_top.html_logo_center #header_main_alternate .main_menu .av-main-nav > li > a { padding: 0 !important; font-size: 19px !important; } }i guess you will set the header widget to display none on small screens
@media only screen and (max-width: 989px) { #header .widget { display: none; } }by the way: is it intentional that the container width is set to 1130px ?
In reply to: Mobile screen result
You have to find these rules:
@media only screen and (min-width:768px) and (max-width:989px) { body, body .avia-tooltip { font-size:80px } h1 { font-size:60px } h2 { font-size:50px } h3 { font-size:42px } } @media only screen and (min-width:480px) and (max-width:767px) { body, body .avia-tooltip { font-size:66px } h1 { font-size:46px } h2 { font-size:37px } h3 { font-size:29px } } @media only screen and (max-width:479px) { body, body .avia-tooltip { font-size:53px } h1 { font-size:38px } h2 { font-size:28px } h3 { font-size:20px } }This is a very unusual scaling.
First of all, the value for the base (body) is set very high.
Even if you take the aspect of wai aria into account, a body font-size of 53 ( below 479px) is gigantic. For desktop screen widths, this is 13px.
Here I would rather go higher, e.g. to 16px.Because you have set a merging of the styles – i can not say where the rules comes from ( maybe it is a merging of W3total Cache ).
have a look if you have set on General Styling – Typography these values or in your quick css.
In reply to: different fonts with differetnt colors
Hi,
I added to the quick css
body {
font-size: 16px;
letter-spacing: .04rem;
font-family: univers, ‘univers’, ‘Univers LT Std’;
font-weight: 400;
font-style: normal;
}
And added a link in the header
<link rel=”preload” href=”UniversLTStd-LightCn.woff2″ as=”font” type=”font/woff2″ crossorigin>This works
Thank you for thinking with meBest regards, Wouter
In reply to: Edit style of text on masonry
Hi,
Thank you for the update.
Yes, you can adjust the style as you wish and include the font-family property if you want to change the font:
.grid-entry-title { font-size: 13px; margin: 0; padding: 0; font-weight: 500; font-family: 'Roboto'; }If you want to adjust the font globally, go to Enfold > General Styling > Fonts tab. For more info, please refer to this documentation: https://kriesi.at/documentation/enfold/typography/#overview
Best regards,
IsmaelIn reply to: Edit style of text on masonry
Hi,
For the /artikler/ page titles to look like the /blog/ page titles,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:.grid-sort-container .grid-entry-title { font-weight: 600; font-size: 15px; }or for the other way:
.av-masonry-entry-title.entry-title { font-weight: 500; font-size: 13px; }After applying the css, please clear your browser cache and check.
Best regards,
MikeHi,
Thank you for the update.
If you need to specifically target the elements in the mega menu, you can start with this css code — take note of the comments:
/* description */ #top #header .avia_mega_div > .sub-menu > li > ul li { font-size: 100px; } /* menu items */ #top #header .avia_mega_div .sub-menu li a .avia-menu-text { font-size: 50px; padding: 50px 0; } /* mega menu title */ #top #header .mega_menu_title { margin-bottom: 8px; font-size: 90px; line-height: 1.1em; font-weight: 600; display: block; }You may need to remove this css code:
.sub-menu li a .avia-menu-text { font-size: 20px !important; padding: 20px 0 !important; }And make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings and purge the cache after the modification.
Best regards,
Ismael
