Hi,
Sorry for the late reply. Please try this CSS as well:
@media only screen and (max-width: 767px) {
#menu-item-wc-account-icon a:before {
font-size: 26px;
}
}
Best regards,
Rikard
Hello Kriesi team,
in one of my blog posts, the blog picture is displayed twice, along with a different title. Both appeared after I picked a blog image in the sidebar menu. I tried to remove it from the code, but it seems to be not there, I guess it’s some kind of preview gone wrong. At the same time, the font size and the padding to the left and right are both bigger now than before and in my other blog entries.
Thanks for your help!
Hi there
I have created a 3 column footer – the Widget titles are meant to have have white border top and bottom but they are not displaying on desktop but are displaying on mobile.
I also have the first column as a Mail chimp form – however the order of form fields is incorrect – should be 1) Email address, 2 Frist name, 3) Last Name. Is incorrect on both mobile and desktop (showing email, last name then first name). Also how can I change the font size of the text in each form field to be smaller – Ive adjusted the form in Mailchimp but is still showing larger.
How can I reduce the Gap top and bottom of entire footer section inner padding?
How can I reduce the gap between columns when they are stacked on mobile?
Hey lara666,
Thank you for the inquiry.
You can add this css code to adjust the style of the icon list title:
#top #wrap_all .avia-icon-list-container.av-m6zynu03-656fee89931be518806dc34f25ba77ad .av_iconlist_title, #top #wrap_all .avia-icon-list-container.av-m6zyi7hq-1697bf2386f7aa527bd05b8b90479d05 .av_iconlist_title {
font-size: 13px;
color: #969696;
font-weight: 400;
font-family: 'open sans', Helvetica, Arial, sans-serif;
}
Best regards,
Ismael
Hey xfacta,
Thank you for the inquiry.
Did you add the following css code or adjust the style of the paragraph element in the Enfold > Advanced Styling panel?
#top .all_colors p {
font-size: 16px;
line-height: 1.7em;
}
This overrides the custom element styling on mobile view.
Best regards,
Ismael
Hi there I have changed the font sizes for the heading and subheading but only the heading seem to showing any changes – the subheading on mobile seems to be overiden somewhere else that I cant figure out.
its theIn loving memory section at the bottom of the page – the subheading text is “Life is change, without change there is no life; Love You”. I have made it 25px but its showing as 14px.
Hi,
I made an adjustment so now the image is on the right side, but your titles are too large and long, so I added this css to brake your text so the element lines up good:
.avia-timeline h2.av-milestone-date>strong {
width: 200px;
font-size: 20px !important;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
you can adjust the font size and width to suit, but there is not a lot of options.
You may try making the page width 100% with this css:
.responsive #top.page-id-19 #after_tab_section_1 .container {
max-width: 100%;
}
and then make the font size and width larger to suit.
Best regards,
Mike
Hi,
@media only screen and (max-width: 768px) {
.avia-caption-content p {
font-size: 40px !important;
line-height: 32px !important;
}
}
@media only screen and (max-width: 479px) {
#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title {
font-size: 50px;
line-height: 43px;
}
}

Best regards,
Mike
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!!
-
This topic was modified 1 year, 1 month ago by
bemodesign.
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