Hey reqonsult,
Thank you for the link to your site, this is because the first paragraph is in the “td” and the others are in a “p” which has more specialty.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#top .all_colors td p {
font-size: 13px;
font-weight: 400;
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hello, on this subpage of our blog we have noticed that if there are multiple paragraphs or separate text units in the tables, the layout is different from the second paragraph onwards (please see attached screenshot). The font and font size are not the same as in the first paragraph.
We have of course made sure that all the text is added without being formatted. This cannot be the problem here.
How can this be solved? Many thanks for your support
Hey ballindigital,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#header_meta.av_extra_header_active > .container {
display: flex;
justify-content: center;
}
.phone-info {
font-size: 14px;
}
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,
Mike
Hey lauragrashoff,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field and adjust the font sizes to suit:
#top.single-post #wrap_all #main .container_wrap_first h1 {
font-size: 60px;
}
#top.single-post #wrap_all #main .container_wrap_first h2 {
font-size: 30px;
}
#top.single-post #wrap_all #main .container_wrap_first p {
font-size: 20px;
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hey,
ich würde gerne andere Schriftgrößen für die Texte in meinen Blog-Einträgen verändern. Der Content der restlichen Website soll sich dabei nicht verändern.
Ich würde gerne die H1, H2 und den Fließtext in anderen Schriftgrößen darstellen.
Habt ihr einen CSS Code für mich, um das umzusetzen?
Vielen Dank!
Hi Guenni,
i will do that now. Sould i keep or delete:
/**** Feld Definitionen ********/
#top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text { grid-area: feld1 }
/*** depends on if there is a link on the image or not ****/
#top .avia_textblock.img-with-caption-right .wp-caption > *:first-child { grid-area: feld2 }
#top .avia_textblock.img-with-caption-right .wp-caption {
border: 1px solid #cccccc;
width: 100% !important;
margin: 0;
display: grid;
grid-auto-rows: auto;
grid-template-columns: 1fr 1fr;
grid-template-areas: "feld2 feld1";
align-items: flex-end;
}
#top .avia_textblock.img-with-caption-right .wp-caption img {
padding: 0 !important;
}
#top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text {
display: block ;
color: #222222;
font-style: normal;
font-size: 18px;
font-family: inherit;
width: 100%;
padding: 0 1em;
text-align: left;
}
.avia_textblock.img-with-caption-right .wp-caption .wp-caption-text p {
margin: 0 !important;
}
/*** Abstang über dem Rahmen ******/
#top .avia_textblock.img-with-caption-right .wp-caption img {
margin-top: 70px
}
/**** for responsive case maybe:*****/
@media only screen and (min-width: 990px) and (max-width: 1051px) {
#top .avia_textblock.img-with-caption-right .wp-caption {
grid-template-columns: 1fr;
grid-template-areas: "feld2" "feld1" !important;
}
}
for css or just add your new css?
kind regards
Jak
-
This reply was modified 1 year, 6 months ago by
Jak73.
Hi,
Thank you for the inquiry.
Have you tried adjusting the font sizes of the captions in the Styling > Font Sizes panel for each slide? It’s possible to set the font size for different screen sizes.
Best regards,
Ismael
But The font does not seem to load completely when only the Latin fonts are used. At least it does not seem to load as slowly as the file size of the upload would suggest.

on the alb itself you got on styling options all you need : even the font color – and font-size.
The trick is that you can now use this class with different settings (backgrounds, font sizes and colours).
By the way – you are planning to use a chineese translation ? I do not really know why you are using such a performance hungry font for your page. I would at least set the English sentences in a similar Latin font.
For example from your page the comparison of zenkakugothicnew to (on Google Fonts) Hanken Grotesk:

Hey Jak73,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#footer-title {
font-size: 38px;
font-weight: bold;
font-family: arial;
color: #222;
float: right;
top: -38px;
position: relative;
left: -10%;
}
Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:
function custom_script() { ?>
<script>
document.addEventListener("DOMContentLoaded", function() {
var titleText = document.querySelector("h1.av-special-heading-tag").textContent;
var footerTitleDiv = document.createElement("div");
footerTitleDiv.id = "footer-title";
footerTitleDiv.textContent = titleText;
document.getElementById("socket").appendChild(footerTitleDiv);
});
</script>
<?php
}
add_action( 'wp_footer', 'custom_script', 99 );
This is the expected result:

Best regards,
Mike
Hi,
i would like to add my title text to the footer, which should be formated in the following way (please see screenshot):
font-size: 38px;
font-weight: bold;
font-family: arial;
color: #222;
How can i do that?
kind regards Jak
Hello,
the only css i have concerning Masonry are :
` .main_color .container .av-inner-masonry-content,
#top .main_color .container .av-masonry-load-more,
#top .main_color .container .av-masonry-sort,
.main_color .container .av-masonry-entry .avia-arrow {
background-color: rgba(248, 248, 248, 0.6);
}
.av-fixed-size .av-masonry-entry .av-inner-masonry-content,
.av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
text-align:center;
padding: 0 10px 0 10px;
font-size: 16px;
font-weight:700;
}
.av-inner-masonry {
box-shadow:10px 10px 5px 1px rgba(0,0,0,0.3);
}`
I removed it and it changed nothing..
Concerning the script, it doesn’t change anything too.
well the hook : ava_main_header is just under the header_meta – it is the first child inside header_main.
Position is perfect. The rest is styling and positioning.
you can create a widget area there – or insert directly just your button:
f.e.:
function custom_func() {
?>
<div class="spezial"><div class="avia-button-wrap avia-button-right"><a href="#" class="avia-button av-link-btn avia-icon_select-yes-left-icon avia-size-medium avia-position-center avia-color-theme-color"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="fontelico"></span><span class="avia_iconbox_title">call to action …</span></a></div></div>
<?php
}
add_action('ava_main_header' , 'custom_func');
Hi,
how can i change the size and the font of the text menu?
kind regards Jak
For a couple of days, and suddenly without actively updating anything from our side, the pages started to look odd and layout, mostly font size was wrong.
This is still as you can see on the website.
Do you have any idea why the English page is acting differently than the German one? Any recommendation how to fix this or find the source of this?
Hi,
I’m using an notification element for links (cause I think they look good as a highlight).
What does cookie_lifetime=’60’ mean and can I delete it?
<a href="#verlustangsttest">[av_notification title='Test' icon_select='yes' icon='ue81d' font='entypo-fontello' close_btn='' cookie_lifetime='60' size='normal' color='custom' custom_bg='#ECE5DB' gradient_bg_direction='vertical' gradient_bg_1='#000000' gradient_bg_2='#ffffff' gradient_bg_3='' custom_font='#434F5D' nb_border='' nb_border_width='' nb_border_width_sync='true' nb_border_color='' border='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' sonar_effect_effect='shadow_hover_perm' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' custom_class='' template_class='' element_template='' one_element_template='' av_uid='' sc_version='1.0' admin_preview_bg='']
<strong>Teste dich: Wie stark ist deine Verlustangst und dein Klammerverhalten?</strong>
[/av_notification]</a>
Best regards
Hi,
And how do i adjust the css?
I mean: it says: your css here…; how and where do i place the font name ( and size ) and the color?
To adjust the style of the link, you can use this css code in the Enfold > General Styling > Quick CSS field:
.go-back-link {
color: red;
font-size: 16px;
font-family: 'Calibri', sans-serif;
}
Best regards,
Ismael
see here with an image : https://webers-testseite.de/popup-gallery/
or simpler by a different font icon
#top .image-overlay .image-overlay-inside::before {
content: "\E80E" !important;
font-family: entypo-fontello;
font-size: 42px;
font-weight: 400;
}
use that class: go-back-link for styling.
i have on some installations for posts/portfolio on top a goback button with this:
function go_back_button(){
?>
<script type = "text/javascript">
(function($){
$('<div class="avia-button-wrap avia-button-left goback"><a href="" class="avia-button av-icon-on-hover avia-color-theme-color avia-icon_select-yes-left-icon avia-size-small avia-position-center "><span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">zurück</span></a></div>').prependTo('#top.single .post-entry:first');
$('.goback').on('click', function(e){
e.preventDefault();
window.history.back();
});
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'go_back_button' );
the window.history.back(); can do the job too.
but you can place that manually be each button with that class custom-class : goback
then only use:
function go_back_button(){
?>
<script type = "text/javascript">
(function($){
$('.goback').on('click', function(e){
e.preventDefault();
window.history.back();
});
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'go_back_button' );
Hi Mike
And how do i adjust the css?
I mean: it says: your css here…; how and where do i place the font name ( and size ) and the color?
Tnx in advance..
Greetz
Karin
Hi Mike,
thank you. It seems to work but somehow I cannot change the color of the icons. I tried to insert the color code in this part of the css:
#top .dotsmenu .av-subnav-menu li a:before {
display: inline-block !important;
font-size:30px;
color: #fff;
}
but nothing changes.
Regards
Daniela
Hey lelouxwebdesign,
In your sidebar add a Custom HTML widget with this code:
<a href="javascript:history.back()">Go Back</a>

then in the post sidebar you will see a “Go Back” link

you can style it as you wish and clicking it will send the visitor to the last page they viewed.
If you want to use a button, you can create a buton with the shortcode wand and use this as the manual link: javascript:history.back()

[av_button label='Go Back' icon_select='yes' icon='ue831' font='entypo-fontello' button_type='' link='manually,javascript:history.back()' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='large' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' 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='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']

Best regards,
Mike
Hey Daniela,
I recommend creating a dotsmenu as described in our documentation and create the simple custom menu in the element:

with the custom class dotsmenu:

then to use entypo-fontello icons, go to your icon element and hover over the icons that you want to use and the chrcode will show, always drop the first “U”, so the code that you will use for this screenshot will be \e804

Then use this css, at teh bottom you will see the six icons for the six menu items in my example, add more if you wish:
#top .dotsmenu {
background: transparent;
position: fixed!important;
right: 10px;
top: 50%!important;
transform: translateY(-50%);
border: none!important;
max-width: 30px!important;
}
#top .dotsmenu .av-subnav-menu > li {
display: inline!important;
margin: 10px !important;
}
#top .dotsmenu .av-subnav-menu li a {
max-width: 40px;
max-height:45px;
border-radius:0;
overflow:hidden;
padding: 0 !important;
border: none!important;
background: transparent;
}
#top .dotsmenu .av-subnav-menu li a .avia-bullet {
display: none !important;
}
#top .dotsmenu .av-subnav-menu li a .avia-menu-text {
visibility: hidden;
}
@media only screen and (max-width: 767px) {
.responsive #top .dotsmenu {
background: transparent;
position: fixed!important;
right: 0;
top: 50%!important;
transform: translateY(-50%);
}}
#top .dotsmenu .av-subnav-menu li a:before {
display: inline-block !important;
font-size:30px;
color: #fff;
}
#top .dotsmenu .av-subnav-menu li:nth-child(1) a:before {
content: '\e804';
font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(2) a:before {
content: '\e82a';
font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(3) a:before {
content: '\e83d';
font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(4) a:before {
content: '\e8b3';
font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(5) a:before {
content: '\e8d2';
font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(6) a:before {
content: '\e8b9';
font-family: 'entypo-fontello';
}
This is the result:

Best regards,
Mike
Hey Erin,
Thank you for the inquiry.
By default, the content in the footer inherits the default font size. If you wish to adjust it, you can use this code in the Quick CSS field:
#footer, #footer p, #footer li {
font-size: 0.8em;
}
Best regards,
Ismael
Good morning
I have just built a website for a client and whilst he is happy with the website, he doesn’t like the mobile responsiveness of the Testimonial Slider (large). On a desktop it looks great, but on the mobile, there is a large margin on either side and also the photo does not appear centred and the name is also off centre.
I tried changing the font size for a mobile device but that didn’t seem to work.
Is there a quick CSS code that I can add that would reduce the margin size on all the testimonials throughout the website and that would centre the image and the name.
See below for link to website and also screenshots of the testimonial element and how they appear on a mobile device.
Thank you very much
Ivana
Hey Aleksandra,
Thank you for the inquiry.
Have you tried selecting a different font? You can adjust this in the Enfold > General Styling > Fonts tab. You can also modify the default content font size for various screen sizes in the Typography tab.
Best regards,
Ismael
Hi,
This CSS is applying:
@media only screen and (min-width: 767px) {
h1.av-special-heading-tag {
font-size: 140px !important;
}
}
Try removing the !important part, then use this CSS:
#boelge h1 a {
font-size: 200px;
}
Best regards,
Rikard
Hi
I am trying to target the special heading element with css class “boelge” on my landing page to change the font size, but it’s not displaying correctly.
I’m using this code:
#top .boelge {
font-size: 200px !important;
}
Can you help me with this?
Thanks
Nancy
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#top #wrap_all .all_colors h3 .span-reading-time {
font-size: 12px;
}
and adjust the font size to suit.
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hey dburton77,
Thank you for the link to your site, for the max-width 767px the heading row is hidden and the pseudo-element :before is used so the heading is stacked instead of being in a single row.
To style the pseudo-element try this css:
@media only screen and (max-width: 767px) {
.responsive .avia_responsive_table .avia-data-table td:before {
color: #0097ff;
font-weight: 600;
font-size: 17px;
font-style: normal;
}
}
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,
Mike