Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
@media only screen and (max-width: 768px) {
.avia-caption-content p {
font-size: 40px !important;
}
}
#top.home .av-special-heading.avia-builder-el-5 {
margin-top: 0;
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hey Tanja,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#top.home .alternate_color .homepgservicestable.avia-data-table.avia_pricing_minimal td {
color: #fff;
border-color: transparent;
font-size: 2em;
}
Best regards,
Mike
Please help with this. The font sizes and formatting is all off when it’s live, but perfect when I am signed in and viewing. Is this code or a plugins conflicting. Really need help on this one quick. thank you so much!
live, not right formatting: https://img.savvyify.com/image/Screen-Shot-2025-02-07-at-5.39.03-PM.9p7cM
my view when signed in: https://img.savvyify.com/image/Screen-Shot-2025-02-07-at-5.40.42-PM.9pGUA
How do we change the font colour and size, and table borders in a table element?
I need:
Font: white
Font size: 2em
Border: transparent
I changed the background to transparent via CSS, but cannot change the font or border.
.home .homepgservicestable {
background-color: transparent;
}
Hey lara666,
Thank you for the inquiry.
You can use this css code to adjust the style of the featured image slider title:
#top .avia-featureimage-slideshow.av-m6tyn82g-131d78d88d19991cbc6ff96d197c2974 .avia-caption-title * {
font-weight: 400;
text-decoration: none;
font-size: 20px;
}
You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the code.
Best regards,
Ismael
Hi there,
On my homepage, I have a Featured Image Slider, and the caption title for all images has an underline. Could you please advise me on how to remove it?
Additionally, the font on the Featured Image Slider appears quite thick. I would like it to match the Portfolio title above the slider, with a smaller font size.
Thanks!
1. No matter what I adjust, I can’t get the font size to change on the “caption text” on full width slider.
Can you help or get me CSS? I adjusted in the section and it didn’t work. This below did Not work. thanks
/* Responsive Font Size for Mobile */
@media only screen and (max-width: 768px) {
.avia-caption-content {
font-size: 40px !important;
}
}
2. I also need to adjust the “line-height” on both titles because the words are really spread apart.
Thanks!!
I think this is better.
I tryed my side it works
Best regards,
James
/* ———————————— */
/* ——- WIDGET MENU ——- */
/* ———————————— */
#top .widget ul {
font-size: large;
line-height: 121%;
}
/* —— personalize current page appearence —— */
#top .widget ul li.current_page_item {
background: url(“icon.png”) left no-repeat;
padding-left: 14px;
font-weight: 900;
}
/* link appareance of current page */
#top .widget ul li.current_page_item a,
#top .widget ul li.current_page_item a:hover {
background-color: #c7eafc;
padding: 0 4%;
border-radius: 9px;
}
/* —— HOVER links appareance (but current page) —— */
#top .widget ul a:hover {
background-color: gold;
padding: 0 4%;
border-radius: 9px;
}
/* deleting background color */
#top .widget ul.children a {
background-color: transparent;
padding: 0;
border-radius: 9px;
}
Hi Mike,
Thank you.
Yes, I finally found the solution on my own ;-)
I post here my CSS.
I know this can be improved.
However it could be usefull for other users that read this post so i hope this could help.
Best regards
James
/* ———————————— */
/* ——- WIDGET MENU PERSONALIZE ——- */
/* ———————————— */
#top .widget ul {
font-size: large;
line-height: 121%;
}
/* —— personalize current page link —— */
/*—- adding icon for current page link —- */
#top .widget ul li.current_page_item {
background-image: url(“icon.png”);
background-position: left;
background-repeat: no-repeat;
padding-left: 14px;
font-weight: 900 !important;
}
/*—- adding specific background color for current page —- */
/*—- and adding little spacing between letters —- */
#top .widget ul li.current_page_item a {
background-color: #c7eafc;
padding: 0% 4% 0% 4%;
letter-spacing: 0.007em;
border-radius: 9px;
}
/* — HOVER – adding background color for current page — */
#top .widget ul li.current_page_item a:hover {
background-color: #c7eafc;
padding: 0% 4% 0% 4%;
letter-spacing: 0.007em;
border-radius: 9px;
}
/* —— HOVER – appearence for all links (but current page) —— */
#top .widget ul a:hover {
background-color: gold;
padding: 0% 4% 0% 4% !important;
letter-spacing: 0.007em;
border-radius: 9px;
}
#top .widget ul.children inherit a {
background-color: none;
padding: 0%;
border-radius: 9px;
}
Hey rvga,
Thank you for the inquiry.
You can try this shortcode:
[av_font_icon icon='ue81f' font='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-m6q2a64z' sc_version='1.0' admin_preview_bg='']
This will display as tooltip!
[/av_font_icon]
Let us know if you need more info.
Best regards,
Ismael
Hello,
I want to add a tooltip icon inside a row of a table using a shortcode icon, but I couldn’t find the right syntax for calling the tooltip!
[av_font_icon icon='ue81f' font='entypo-fontello' avia-icon-tooltip='Need that text to show up in a tooltip' style='' caption='' link='' linktarget='' size='16px' position='left' color='' custom_class='' admin_preview_bg='' av_uid='av-6f14vz'][/av_font_icon]
Thx for your tip.
Hi Rikard,
I followed your advice and it works quite well thank you, but I cannot format the link of the current page appearing in the menu widget.
I started a topic about this :
Currently the “current page link” appear in black but i would like to change it as i wish (like background color, font size,…).
I know it’s a simple CSS to add but I don’t know to do it.
Can you help me with this?
Best regards,
James
Hi,
Thank you for the info.
Have you tried adjusting the Styling > Caption Title Font Size and Caption Content Font Size values for mobile view or smaller screens? Please check the screenshot below:
View post on imgur.com
Best regards,
Ismael
Hey John,
Thanks for the login. I’m not sure exactly what you are looking to achieve, could you try to explain your intentions a bit further please? Also, did you try to set smaller font sizes for the caption in the element options?
Best regards,
Rikard
use instead:
@media only screen and (max-width: 767px) {
.responsive #top .av-special-heading .av-subheading p {
font-size: 36px !important;
line-height: 1.5em !important;
}
}
because you have set in your css:
@media only screen and (max-width: 767px) {
body, p, .entry-content {
font-size: 18px !important;
line-height: 1.6 !important;
}
}
it is necessary to do so aswell with !important
have a look at : https://webers-testseite.de/bemopriv/
the heading had to be styled for responsive case – but I didn’t feel like doing that anymore.
the layout is based on a grid-row element
this is the enfold shortcode of the grid-row:
[av_layout_row min_height_percent='percent' min_height_pc='60' min_height='0' border='' fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' color='main_color' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' mobile='av-flex-cells' mobile_breaking='' mobile_column_order='' id='' custom_class='full-bg-image' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-m6f9v8gq' sc_version='1.0']
[av_cell_three_fourth vertical_align='middle' padding=',,,' av-desktop-padding=',,,80px' av-medium-padding=',,,80px' av-small-padding='3' av-small-padding_sync='true' av-mini-padding='20' av-mini-padding_sync='true' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' link_dynamic='' linktarget='' title_attr='' link_hover='' mobile_display='' mobile_col_pos='0' custom_class='' template_class='' av_uid='av-m6f9ukqb' sc_version='1.0']
[av_four_fifth first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_width='10' row_boxshadow_color='' margin='0px' 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' mobile_breaking='' mobile_column_order='' border='1' border_style='solid' border_color='#000000' radius='15' radius_sync='true' min_col_height='' padding='30' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_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='' fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' column_boxshadow_width='10' column_boxshadow_color='' background='bg_color' background_color='rgba(0,0,0,0.5)' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' src_dynamic='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' fold_timer='' z_index_fold='' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' link='' link_dynamic='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='' template_class='' aria_label='' element_template='' one_element_template='' av_uid='av-t574on' sc_version='1.0']
[av_heading heading='FREEZE FLAT™' tag='h1' style='blockquote modern-quote' subheading_active='subheading_above' show_icon='' icon='ue800' font='entypo-fontello' size='' av-desktop-font-size-title='48' av-medium-font-size-title='42' av-small-font-size-title='36' av-mini-font-size-title='28' subheading_size='' av-desktop-font-size='36' av-medium-font-size='28' av-small-font-size='24' av-mini-font-size='20' 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='#ffffff' 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='' link_dynamic='' link_target='' title_attr='' id='' custom_class='iceglas' template_class='' element_template='' one_element_template='' av_uid='av-m6e7xj5g' sc_version='1.0' admin_preview_bg='']
The Original
[/av_heading]
[/av_four_fifth][/av_cell_three_fourth][av_cell_one_fourth vertical_align='bottom' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' link_dynamic='' linktarget='' title_attr='' link_hover='' mobile_display='' mobile_col_pos='0' custom_class='' template_class='' av_uid='av-u4sunr' sc_version='1.0']
[av_video src='https://www.youtube.com/watch?v=W73GdyDSHuU' mobile_image='https://webers-testseite.de/wp-content/uploads/dynamic_avia/avia_video_thumbnails/youtube/W73GdyDSHuU/W73GdyDSHuU.jpg' attachment='49853' attachment_size='full' video_autoplay_enabled='aviaTBvideo_autoplay_enabled' html5_fullscreen='aviaTBhtml5_fullscreen' format='16-9' width='16' height='9' conditional_play='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-m6f9u95o' sc_version='1.0']
[/av_cell_one_fourth]
[/av_layout_row]
It still doesn’t make it larger. Is there some other code that is blocking or taking over?
And I already tried to increase font size inside the Special Heading.
thanks
besides the possibility to set it directly in the element itself:
(here an example with screen-width less than a given value)

you can manage it by quick css too:
(you only missed to select the p tag inside your selector)
@media only screen and (max-width: 767px) {
#top .av-special-heading .av-subheading p {
font-size: 24px
}
}
how do I increase font size of Subheading Text in the Special Heading on mobile view? I tried this but it didn’t change it
/* Increase subheading font size on mobile */
@media only screen and (max-width: 767px) {
.av-special-heading .av-subheading {
font-size: 18px !important; /* Adjust as needed */
line-height: 1.4 !important; /* Optional for spacing */
}
}
Hey bemodesign,
Thank you for the inquiry.
You can adjust the font size of the slider caption in the Styling > Font Sizes panel. Please check the screenshot below.
View post on imgur.com
Best regards,
Ismael
Hey bemodesign,
Thank you for the inquiry.
You can add this css code to adjust the height of the slider on mobile view.
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.avia-slideshow.av-k5zwtv35-191253da2a907a8438f9e3ea5aa30763 .avia-slideshow-slide,
.avia-slideshow.av-k5zwtv35-191253da2a907a8438f9e3ea5aa30763 .avia-slideshow-slide>div {
min-height: 330px;
}
.avia-slideshow.av-k5zwtv35-191253da2a907a8438f9e3ea5aa30763 .avia-slideshow-slide img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 330px;
}
#top #wrap_all .avia-slideshow .av-slideshow-caption.av-k5zwtv35-191253da2a907a8438f9e3ea5aa30763__0 .avia-caption-title {
font-size: 30px;
}
#top .avia-slideshow .av-slideshow-caption.av-k5zwtv35-191253da2a907a8438f9e3ea5aa30763__0 .avia-caption-content p {
font-size: 20px;
}
}
Best regards,
Ismael
yes – and your mentioned code above : a.cart_dropdown_link leads me to the wrong direction.
But better is to post the link to that page – so i can inspect it there. – is it the priver page?
(f.e. the demo page Enfold Shop does not have that account login icon inside main nav. it is on header_top.)
#top #header .av-main-nav #menu-item-wc-account-icon > a {
color: #f19809;
font-size: 28px;
}
or if you like to have a hover effect on this:
#top #header .av-main-nav #menu-item-wc-account-icon > a {
color: #f19809;
font-size: 28px;
transition: color 0.7s ease;
}
#top #header .av-main-nav #menu-item-wc-account-icon > a:hover {
color: #1c60c7;
}
the data-av_icon is on the following span tag:
#top a.cart_dropdown_link {
right: 15px;
}
#top a.cart_dropdown_link span[data-av_icon] {
font-size: 28px;
color: var(--enfold-header-color-color);
}
/* === to influence the counter === */
#top a.cart_dropdown_link span.av-cart-counter {
height: 20px;
left: 64%;
font-size: 18px;
line-height: 20px;
border-radius: 50%;
background: var(--enfold-header-color-primary);
color: var(--enfold-header-color-constant-font);
margin: -22px 0 0 2px;
padding: 2px 6px;
}
i inserted above the default colors – change them to your needs
Hello, can you get me CSS code to increase size of Shop Account login icon in the header?’
thanks
I used this for the cart size;
a.cart_dropdown_link {
font-size: 28px !important;
}
Hi there and thank you for getting back to me… I had created a handful of styles (both for desktop and mobile breakpoints) for the logo, text description, and screenshot… All of which included details regarding positioning and size… None of them are loading anymore. There’s no connection between the css lightbox styles and any element in the light box since updating the theme… Do I need to put these styles in a different location other than in the the ‘quick CSS’ section of the Enfold ‘general style’ settings?
some css style examples that are no longer loading:
.lightbox_content_left
{
width:200px;
float:none;
display:block;
clear:both;
font-weight:normal;
font-size:2em;
line-height:1.4em;
text-transform: none;
color:#685f5f;
}
img.lightbox_logo {
display: block;
clear:both;
float: none;
padding: 0px 0px 15px;
width: 45%;
}
-
This reply was modified 1 year, 1 month ago by
nulrick.
Hi,
Thank you for the update.
You can use this css code and adjust the values as needed:
#top #wrap_all #footer .social_bookmarks {
height: 80px;
}
#top #footer .social_bookmarks li {
height: 100%;
width: 80px;
}
#top #footer .social_bookmarks li a {
font-size: 48px;
height: 48px;
width: 80px;
line-height: 60px;
}
Best regards,
Ismael
Hi,
Thank you for the inquiry.
You can use this html to display the reddit icon:
<li class="social_bookmarks_reddit av-social-link-reddit social_icon_5"><a aria-label="Link to Reddit" href="#" aria-hidden="false" data-av_icon="" data-av_iconfont="entypo-fontello" title="Reddit"><span class="avia_hidden_link_text">Reddit</span></a></li>
And to adjust the size of the icons, add this css code:
#footer .social_bookmarks li a {
font-size: 20px;
line-height: 20px;
}
Best regards,
Ismael
Hi,
Thank you for the update.
We can create a copy of enfold/config-templatebuilder/avia-shortcodes/icongrid/v50/icongrid.php and override the default settings. Please add this code to the functions.php file:”
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
$template_url = get_stylesheet_directory();
array_unshift($paths, $template_url . '/shortcodes/');
return $paths;
}
In the child theme directory, create an icongrid.php file inside the folder shortcodes/icongrid, then use this code:
// https://pastebin.com/1YfZfFfQ
This should increase the Icon Font Size selection to 200px.
Best regards,
Ismael